CSS transition not working for percentage 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

The (pure CSS) solution so far

If you leave height:auto; and use fixed values of max-height you can simulate a transition:

.details-expanded {     max-height: 300px; /* try to guess a max-height for your content */ }  .details-collapsed {     height: auto;     max-height: 0;     transition: max-height 500ms linear; /* pick a proportional duration */ } 

Pay attention to the transition duration and max-height when the element is expanded. Play with the values until you get the wanted behavior.

This way you can get a transition between two defined values (in the above example, from 0 to 300) while the height property will just "follow" the max-height transition and grow until it gets the content's size.

---

Demos

DEMO 1 - a working example of this solution

DEMO 2 - just demonstration of what is going on in DEMO 1

---

Observations

For now transitions are implemented only between predefined values and I supposed it is because the engine cannot guess the initial or final value in some cases. What if you have a height transition which its final value is 50% but transition itself affects the parent's height somehow?! It would probably require several reflow calculations on each frame causing performance issues.

Like fabb said, the spec for CSS transitions determines that percentage values should be supported, so it might be just a matter of time until engines decides on which cases they're going to support transitions using dynamically valued points. Still, I'm not sure about what could be considered the correct behavior for auto values thought.

Answer 2

According to the W3C Spec on CSS3 Transitions, both length and percentage should be allowed for a transition on the property height. So I guess it's just a matter of time until providing a percentage is supported in browsers.