It is automatically adding span tags and breaking design elements

Question

It is automatically adding span tags and breaking design elements

myplaneticket opened this issue 6 years ago · comments

The plugin weirdly started to auto add span tags and started breaking DOM elements.

Matthias · Answer 1 · Tue Feb 13 2018 07:51:01 GMT+0800 (China Standard Time)

I mean the plugin has to add elements somehow to get the ripples to show, right?
Or do you see the span elements outside of their parent elements with which you instantiated the plugin?

Sunny · Answer 2 · Tue Feb 13 2018 09:21:10 GMT+0800 (China Standard Time)

Before click event:

<a href="#" title="Package Info" data-filter-tags="package info" aria-expanded="true" class="legitRipple">
                                <i class="fal fa-tag"></i>
                                <span class="nav-link-text" data-i18n="nav.info_package_info">
                                    Package Info
                                </span>
                            <b class="collapse-sign"><em class="fal fa-angle-up"></em></b></a>

After click event:

<a href="#" title="Package Info" data-filter-tags="package info" aria-expanded="true" class="legitRipple">
                                <i class="fal fa-tag"></i>
                                <span class="nav-link-text" data-i18n="nav.info_package_info">
                                    Package Info
                                </span>
                            <b class="collapse-sign"><em class="fal fa-angle-up"></em></b><span class="legitRipple-ripple" style="left: 56.5385%; top: 46.6667%; transform: translate3d(-50%, -50%, 0px) translate3d(-6.44268%, 0.568471%, 0px); width: 101.487%; opacity: 0;"></span><span class="legitRipple-ripple" style="left: 26.5385%; top: 45.7627%; transform: translate3d(-50%, -50%, 0px) translate3d(22.8798%, 0.937699%, 0px); width: 102.542%; opacity: 0;"></span><span class="legitRipple-ripple" style="left: 14.2308%; top: 37.2881%; transform: translate3d(-50%, -50%, 0px) translate3d(34.8824%, 2.8131%, 0px); width: 102.542%; opacity: 0;"></span></a>

The funny part is, I remember as of 2 weeks ago when it was working, it was never adding extra span tags as a wrapper. It was using ::before and ::after as the animation.

Sunny · Answer 3 · Tue Feb 13 2018 13:01:38 GMT+0800 (China Standard Time)

Could this be in relation to the new jquery update?

Matthias · Answer 4 · Tue Feb 13 2018 17:43:10 GMT+0800 (China Standard Time)

No that's totally normal, it should do that. You can't target :before and :after with js , that's why it has to add these elements. Maybe you could change the styles that are added to the ripple spans manually so that they don't break your layout? If the spans don't disappear some time after clicking, that's a bug. Am 13.02.2018 2:21 vorm. schrieb "MyOrange" <notifications@github.com>:

…

*Before click event:* <a href="#" title="Package Info" data-filter-tags="package info" aria-expanded="true" class="legitRipple"> Package Info </a> *After click event:* <a href="#" title="Package Info" data-filter-tags="package info" aria-expanded="true" class="legitRipple"> Package Info </a> The funny part is, I remember as of 2 weeks ago when it was working, it was never adding extra span tags as a wrapper. It was using ::before and ::after as the animation. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#18 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD2AMV1CVTPRJGxp2dwuGmeiHgPVtKc-ks5tUOOHgaJpZM4SCUli> .

Matthias · Answer 5 · Thu Feb 15 2018 21:19:28 GMT+0800 (China Standard Time)

I hope this helped, please tell me if you have any more questions. :)

Sunny · Answer 6 · Thu Feb 15 2018 21:59:49 GMT+0800 (China Standard Time)

Hi,

I did not see your post till today. I can confirm the bug is still there, the span tag is not getting removed.

Sunny · Answer 7 · Thu Feb 15 2018 22:05:37 GMT+0800 (China Standard Time)

Also, its added 2 span tags instead of just one: