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:
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!