Safari: Ripple will immediately halt its animation if click triggers href navigation
adamck opened this issue · comments
Works correctly in latest Chrome and Firefox, OS X, but fails in Safari 10 and 11.
Chrome: https://cl.ly/1O2L360W2P0y
Safari 11: https://cl.ly/0s0i152Q0X2Y
In the Safari screen cap you can't see the ripple begin but it does appear and begins growing for as long as you hold the mouse down. Then it stops and the page navigation occurs.
These menu items are <li class="menu-item">s with child anchor tags. The effect is initiated on the <li>s with:
$('.menu_wrap .menu-item').ripple();
Unfortunately there's nothing I can do about the markup structure. The links have to remain <a href=""> -- otherwise I'd perform the page nav via JS.
Hi and thanks for the issue! :)
Correct me if I'm wrong but I think that's just the way Safari works: any movement on the page stops on navigation. I don't have anything to test this atm I'm afraid because I'm on vacation right now... 😎
As an alternative I would recommend using JS to navigate as you said, maybe something like https://github.com/miguel-perez/smoothState.js or https://github.com/turbolinks/turbolinks/blob/master/README.md and adding a minimum page transition time during which the next page is already loaded.
Your site looks gorgeous btw.
Thanks again; I hope this helps.
Update here ... I found that this library works for links in Safari: http://fian.my.id/Waves/
Unfortunately it's not implemented nearly as nicely as LegitRipple but it may be worth looking into for figuring out the hitch with Safari.