-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
It is automatically adding span tags and breaking design elements #18
Comments
I mean the plugin has to add elements somehow to get the ripples to show, right? |
Before click event:
After click event:
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. |
Could this be in relation to the new jquery update? |
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>
.
|
I hope this helped, please tell me if you have any more questions. :) |
Hi, I did not see your post till today. I can confirm the bug is still there, the span tag is not getting removed. |
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>
The text was updated successfully, but these errors were encountered: