-webkit-transition not working for height?

Question

I have the following CSS definitions:

.detailsCollapsed { display:none; height:0%; width:100%; -webkit-transition:height 40s ease-in-out; }

.detailsExpanded { display:block; visibility:visible; height:100%; width:100%; -webkit-transition:height 40s ease-in-out; }

These are applied to a div with some content inside of it.

I also have some javascript that when a div is clicked it changes the class name on the element. This works fine for expanding and collapsing but there is no animation on the iphone? (All other transitions I tried work fine with fluid animation) Any ideas?

Answer 1

I appear to have a similar problem. I get the feeling it has something to do with how the height is rendered relative to it's parent. Percentages won't work, but when you change to absolute values the animation will trigger. I suspect I need to set the parent element to relate to the size (which needs to be variable in my case), but haven't found out yet how to do it.

Did you get a workaround?

Answer 2

I'm dealing with this right now. Apparently it doesn't like transforming the 100% to another percent. I haven't found a solution yet, hopefully there is one.

Answer 3

It is the change from display:none to display:block that is stopping the transition. Try setting the collapsed style to display:block; height:0; overflow:hidden;

Note: a expanded height of auto will also stop the transition. If there is no height set on the containing block then a height of 100% is equal to a height of auto.

Answer 4

I think I found a solution.

use "max-height" instead of "height", and let the webkit engine to calculate the height.

.detailsCollapsed {max-height:0;-webkit-transition:max-height 40s ease-in-out;}
.detailsExpanded {max-height:9999px;}

got it?

this worked for me in Chrome 7.0.517.5 dev.