How can I make css3 transitions on height (and other dimensions) smoother on the iPhone?

Question

I'n trying to create a simple slide panel that slides in from the bottom of the screen and covers the viewport. I'm then loading content into that panel via AJAX.

I'm setting the panel element to height:0 and absolutely positioning it at the bottom of the viewport and with css3 transitions applied to, I'm setting the height to the height of the viewport thus triggering the animation.

Unfortunately, the animation is really slow and laggy to a point where it's pretty unacceptable.

I'm applying the following CSS to the panel:

-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: height;

The amount of content seems to have an affect. Or maybe it's the type of content? I'm not sure. I don't think the AJAX is having is causing a problem although I could be wrong.

Any ideas?

Cheers.

Answer 1

The sluggishness surely has to do with the fact that the browser has to re-wrap the text in order to accomodate to the new height. Try animating the position or translate, not the height.

Here is a quick prototype: http://jsfiddle.net/6gdGr/

You might encounter a flickering slide problem, you will find the answer in stackoverflow easily, which involves either 1. placing backface visibility hidden or 2. using -webkit-translate3d, depending on the context.