Shaking issue on iOS browsers

[mas-iota]

Animations on desktop browsers works as expected, however when tested on iOS browsers (chrome, safari), it appears there is some sort of shaking (element position is going up and down)

[robb-g]

I'm having the same issue on iOS and macOS safari. It looks like the svg itself is changing height when it animates.

Removing the height:100% style attribute from the SVG in inspect mode fixes the problem, but since it's not set up as a css variable there's no way to edit it.

Example here (scroll down to the animated icons about 2/3rds of the way down): http://robb.green/pen-centenary

Thanks!

[mas-iota]

@robb-g I used airbnb's web library and tested again, worked perfectly!

[robb-g]

@mas-iota ha me too! Not difficult to implement either. Cheers MAS!

[sijinglei]

怎么解决的，我也遇到ios浏览器抖动问题？上面链接打不开了

[WillDosSantos]

I had this same issue with Lottie. Ended up just targeting the svg with CSS and slapping an height: auto!important on it. That solved the shaking for me. I know it's a no no but was limited on time. Interested in anyone who has a better idea. FWIW, the renderer: 'canvas' was not an option for us as the quality got super low with that.