Regression: Safari CSS animation broken on tanuki logo svg
I noticed this while reviewing !6603 (merged). This is a regression of !2690 (closed) (#11867 (closed)). The regression happened in !4661 (merged) (#18604 (closed))
Safari does not apply CSS animations to SVG elements when they are contained within a link that a user has visited. See @rrott's helpful blog post here: https://rrott.com/blog/svg/issue-with-css-transition-animation-in-safari.html
This applies not only to the :hover
animation, but to the turbolinks loading keyframe animation as well. It looks like the same fix could be applied. Just remove the anchor tag surrounding the logo and apply a JavaScript click
event binding.
However, we need to balance this with the issue raised in #18604 (closed) in which a user complained that:
- I cannot middle-click the icon to open the link in a new tab.
- The browser does not show me the destination of the link.
- I cannot right click the icon and use the "Open link in ..." or "Copy link address" context menu options.
Is there a better way to handle this? Or should we just ignore the missing animation in Safari?
/cc @rspeicher