HTML isn't rendered before after translate3d transition

Question

I'm having a particular problem where the rendering of some HTML is delayed by a CSS3 transform3d animation. This happens on all browsers I've tested (Android 4.1 webview, iOS 7, Chrome for Mac, Safari for Mac).

I have a <ul> that acts as a container for my pages. Every li represents a page. The overflow property is set to hidden, so you can only see one page at a time.

When I want to transition to a new page, I set tranform3d to the correct value, and along with transition-duration property, it slides the new page into the view. The funny thing is, the new page isn't rendered before the transition is finished (so it slides in a white page, when the animation is done, the view is displayed).

I can see that the html is inserted before the transition, so it seems to be delaying the rendering of the new <li> element until after the transition is done.

I've also tried updateing the transform3d property 200ms after I insert the new <li> element, when I do this, the view is rendered halfway through the animation.

If I remove the transition-duration property, there is of course no animation, but the <li> element is rendered instantly.

Any way I can solve this? Has anyone experienced something similar?

Example code: http://jsfiddle.net/9RrAN/

Answer 1

Your problem is that you were also animating the width at the same time as -webkit-transform, so the last <li> would wrap to the next line until the width reached its final value (which would happen as the transition ends). If I change the CSS to:

-webkit-transition: -webkit-transform 300ms;
-webkit-transition-timing-function: ease-in-out;

then it works properly. Here's an example: jsfiddle

(This is not related to React in any way.)