Move Animations Choppy on Safari

Design help Animations & Interactions
1

Hey Folks,

Can anyone shed some light on why my move animations look so choppy on Safari?

They look perfect on chrome!

I’m using browser stack to view Safari so maybe it’s something to do with that but otherwise its clearly a problem as they look terrible :frowning:

Video 1: Chrome

Video 2: Safari

Read Only Link

https://preview.webflow.com/preview/overvue-a807d8?utm_medium=preview_link&utm_source=designer&utm_content=overvue-a807d8&preview=4f37c5e8c9bfc49763c97691dabb895f&pageId=651ff6e0e59eaee2ee155175&workflow=preview

Many thanks for any help!

2

Please can someone test this for me on real Safari? That way I could rule out if browser stack is just rendering things badly…

Live Link: Style Sheet

Thanks!

3

Ok so I tried a bunch of things to fix this (which didnt work!) including giving the elements this class which is supposed to improve browser animation rendering:

.will-change {
will-change: transform;
}

I also tried splitting the animations out (eg just testing the move animation on its own) but saw the same behaviour.

Finally I found that if i wrapped the blue box in another div (with some margin around it) and animated that instead then the rendering issues went away.Thank goodness

Still having problems with the stretching button however which only looks perfect on Safari 17 (and has the border radius issue still on earlier versions) so if there’s anyone out there who knows how to fix this please let me know!

Many thanks, Dave