It is automatically adding span tags and breaking design elements

[myplaneticket]

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

<span class="legitRipple-ripple" style="left: 59.2308%; top: 80%; transform: translate3d(-50%, -50%, 0px) translate3d(-9.09554%, -5.11624%, 0px); width: 101.487%; opacity: 0;"></span>

[juni-vogt]

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?

[myplaneticket]

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.

[myplaneticket]

Could this be in relation to the new jquery update?

[juni-vogt]

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"> <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. — 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> .

[juni-vogt]

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

[myplaneticket]

Hi,

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

[myplaneticket]

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