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/