Stutter when doing simultaneous transforms on child and parent


I am using Css transitions and transforms for a page transition. I am animating an element with translate3d, and at the same time I am animating a child of this element, also with translate3d.
When doing this I notice quite some stutter/frame drops, which takes away much from the butter smooth experience i’m going for.

Animating to elements that are not related to each other doesn’t give this stutter, only when animating parent and child at the same time.

Anyone now some performance fix for this? I tried applying translateZ(0) to both elements but no difference.

Do you have an example so we can see how bad it is.?

I guess animating the parent and child is going to be intensive for the browser and it seems you have already tried the 3d fix which is the only tip I know to work.

Unfortunately not atm, only have it locally. But it’s not really BAD, most would probs say it looks smooth. Tried it on my desktop and it was butter smooth on that one so maybe it’s just my laptop that is bad at rendering it.

Just that I am a perfectionist and was looking for a way to make it even smoother I guess.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.