CODEWITHSUNDEEP
animationcsssafarisvg
Simon Willan
Simon Willan

Reputation: 113

Applying a CSS3 transform to an SVG element in Safari

I am using SVGs to build up a cartoon style street scene, and I wanted to have clouds scrolling across the scene. To do this, I was using a setTimeout or requestAnimationFrame (dependant on browser) to update the SVGs (x) position, but the FPS counter dropped from 30fps to 7fps on the iPad because of it. I tried again using SVG transform="translate(x, y)" to see if performance increased. It did not.

Finally, I thought I would try with CSS3 transforms, and applied it directly to the SVG element:

This worked fine in chrome, and firefox. But Safari (including iPad) doesn't seem to accept having css transforms on an SVG.

Is this a known bug? Or is there a way around this? Thanks.

Upvotes: 3

Views: 7399

Answers (2)

Simon Willan
Simon Willan

Reputation: 113

Okay, I'm not sure if I'm 100% right about this, but it seems that setting the "x" value of a transform every frame for any kind of movement (especially in a complex parallax situation where at least 5 layers are moving at the same time) is a very bad idea.

Also after much research it appears SVG1.1 does not support CSS3 transforms across all browsers for certain. SVG transforms are okay but CSS3 is not.

Finally to fix this solution: I simply reset all x, y positions to (0, 0), and positioned everything with -webkit-transform: translate3d(x, y, z). (and variations of for other browsers).

Note: I use translate3d even for a 2d parallax effect and leave z at 0. translate3d is hardware accelerated and has a visible performance increase on the iPad.

Upvotes: 4

bennedich
bennedich

Reputation: 12367

I have no problem with this, you must be doing something wrong.

Working example: http://jsfiddle.net/pqyBJ/

Upvotes: -1

Related Questions