Animation is not smooth on Safari about react-move HOT 3 CLOSED

Hey there.

Is it actually dropping frames if you profile it in Safari? Be helpful to see a profile of the animation.

Because you're not animating lots of elements (if I understand correctly) and it's just a few props it likely not a animation performance issue. There's some layout/recalc differences in Safari that can cause problems and be difficult to track down without looking at all the styles on the page. Wondering if you can put an example together on codesandbox that reproduces the issue.

I think the above is pseudo code for demonstration, but just to be sure...all the style objects that are constant should be defined outside so they don't get created on each render. It creates a lot of extra objects. So like {flex:1, display: "flex"} in the nodes function and {width:200, height:500, backgroundColor: "red"} in the Column component.

Also, are you looking at it in a production build of react?

from react-move.

@sghall Thank you very much for the immediate feedback, We found the reason, it is actually our problem, since we add webkitTransform: "translate3d(0, 0, 0)" to all elements in our index.css, which is used for fix sticky header issue. This will actually interrupt animation.

We move webkitTransform: "translate3d(0, 0, 0) to the places of the sticky header container, and then the problem solved, thank you very much for ur constructive reply, cheers.

from react-move.

That's great. Glad you found the issue! Cheers.

from react-move.