Geek asks and answers

Apply CSS3 transform to SVG element in Safari

I use SVG to create a cartoon-style street scene, and I wanted the clouds to scroll across the scene. For this, I used setTimeout or requestAnimationFrame (depending on the browser) to update the position of SVG (x), but the FPS counter dropped from 30 frames per second to 7 frames per second on the iPad because of this. I tried again using SVG transform = "translate (x, y)" to see if performance had increased. This is not true.

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

This worked fine in chrome and firefox. But Safari (including the iPad) doesn't seem to agree with converting css to SVG.

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

+3
source share
2 answers

Well, I'm not sure that I'm 100% right, but it seems that the “x” value converts every frame for any movement (especially in a difficult parallax situation, where at least 5 layers move in the same way same time) is a very bad idea.

Also, after many studies, SVG1.1 does not support certain CSS3 transformations in all browsers. SVG conversions are fine, but CSS3 isn't.

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

. translate3d 2d z ​​0. translate3d iPad.

+3

More articles:


All Articles