Got a really tricky problem that I’ve been trying to figure out for a while. Essentially I’m building a large rotating wheel which has multiple elements rotating at different speeds. It’s about 5000px square, but the viewport is a percentage of window height. Due to the scaling, the wheel itself is an SVG so that it looks sharp on all devices. The SVG has some pretty complicated paths in places.
It’s hard to explain, so I’ve made a barebones demo of what I’m talking about: http://jsfiddle.net/UsVeZ/3/embedded/result/ (edit it here: http://jsfiddle.net/UsVeZ/13/). Click / tap the document to see it rotate.
Everything looks fine, and it works great on the desktop (Chrome + Safari), but when I rotate the wheel on an iPad, mobile safari lags with the rendering. The rotating animation itself is pretty smooth, but it’s just the rendering that can’t keep up. It’s way worse with my complex SVG (which unfortunately I’m not permitted to share, but the demo gives an idea). Check it out on an iPad to see what I mean.
I’m not quite sure how to solve this problem – ideally it would be great if there was some way to keep the entire SVG in memory (not sure exactly how the rendering works or why it’s doing what it’s doing). If anyone has any ideas, or even a different way to approach, that would be amazing.
So I couldn’t end up solving this issue properly on my real example. I ended up reverting to images (I split up my large image into 9 smaller images and tiled them to get around iOS’ 5mp limit), and on each image I applied the following property which seems to cache the image:
It doesn’t scale as nicely, but it works smoothly which is more important.