eric_morgan59•5d agoProlific Poster

Why does my CSS animation always look janky on Safari

Spent 3 hours last night on a smooth parallax scroll effect that worked perfect in Chrome and Firefox, but Safari turned it into a stuttery mess. Ended up ditching the whole animation and just using a static gradient instead. Anyone found a reliable workaround for this?

2 comments

2 Comments

faith_smith5d ago

Did you catch that article on CSS-Tricks about the whole Safari rendering thing? Apparently Safari handles `will-change` and `transform: translateZ(0)` differently than Chrome, so maybe try adding `-webkit-transform: translateZ(0)` to your animated elements before the transform. I read somewhere that Safari's GPU compositing kicks in only if you explicitly force hardware acceleration that way.

wyatt_fox684d ago

Does the ordering of those properties in the cascade matter for Safari to actually use them?