search

samthor / rippleJS

vanilla Material Design ripples
https://samthor.github.io/rippleJS
MIT License
190 stars 22 forks source link

Links doesn't work in Desktop and Mobile Safari #4

Closed bartoszmagier closed 7 years ago

bartoszmagier commented 7 years ago

Links on <a> elements does not work in Safari when using rippleJS. Is there any fix for this?

samthor commented 7 years ago

It seems to work fine on elements on Safari on Mac. Admittedly, without styling the link, the ripple expands to the whole page - as per the README.md, you need to give the link layout-

Then, add element with the rippleJS class within a parent element that has layout (aka, position: relative or position: absolute).

As for Mobile, I have the same experience - I'm using the iOS simulator, to load test.html, and that works fine.

Can you elaborate?

bartoszmagier commented 7 years ago

@samthor I'm not talking about the ripple effect. Links don't redirect the user after the click (bug tested only on desktop Safari 10.0.2 and mobile browsers).

samthor commented 7 years ago

Sorry, I can't repro. See screenshots-

screen shot 2017-01-18 at 10 44 38

screen shot 2017-01-18 at 10 44 48

(You probably don't need a 3rd shot of what Google looks like :) )

samthor commented 7 years ago

So this issue was that I was suggesting to use a <link class="rippleJS" /> element to contain the ripple. Turns out Safari wasn't happy with this, and was eating the click on the link element.

I've updated the docs to suggest using a plain-old <div class="rippleJS"></div> now.