The Particle Lab

Safari SVG CSS animation bug

By Marc, 21 Nov 2014

While building the new Neutron Creations site (coming very soon!) we came across a particularly frustrating bug in Safari involving animation of SVG elements using CSS3 transforms and opacity simultaneously.

Safari will not animate both attributes at the same time, instead choosing to animate the opacity with the correct timings and when that animation is complete the transform jumps to its correct position, or the translation is just ignored completely.

We’ve produced a minimal testcase below. On the left we have SVG elements and on the right an equivalent set of DOM elements. Both are animated using the same CSS rules.

If you’re using Safari you’ll see the DOM element smoothly animate its position and opacity but the SVG element will only animate its opacity.

There is an open Chromium bug filed for this but it looks like the Chromium team fixed this elsewhere as it does not affect the current Chrome/Opera releases. This fix has not been submitted back to WebKit or at least not included in Safari as it does affect the current Safari 8 as well as the previous version 7 (and probably even older versions that support CSS3 animations and inline SVG).

There is a workaround on Stack Overflow that suggests you add a fill property to your @keyframes declaration. This was not suitable for us for two reasons; 1) we are animating our logo which has specific colours (yes we could change them only very slightly but see the next point) and 2) unlike opacity and transforms, fill cannot be GPU accelerated meaning the numerous animations we are performing would all end up being processed only by the CPU, instead of mostly being recomposited by the GPU, and that would slow things down significantly!

So how did we fix it? We wrapped every SVG element we wanted to do this to in another <g> element and animated the translation on this element and the opacity on the original (now child) element. Unneccessary markup is never ideal but in this case it doesn’t bloat things too much and lets us keep the higher performance GPU rendering.

Have you had to work around any obscure/frustrating/interesting (delete as appropriate) browser bugs? Let us know.

Photo of Marc Roberts, who wrote this blog post

Marc Roberts is Principal & Co-Founder at Neutron Creations, where he rules over all web development and technical direction. His favourite drink is a sweet manhattan and his favourite sandwich is a croque-monsieur. For a plethora of miscellany follow Marc Roberts on twitter.

comments powered by Disqus