Cross-browser CSS transition problems

February 28th, 2012

The great CSS compatibility tables of PPK show good cross browser support for transitions on the width or height property.

Actually the reality is different, there are problems and they are related to height/width changing from percentage/number to another value, from number to percentage and vice versa and most problematic to auto,

You can’t make transitions to height auto, which is IMHO plain stupid. Maybe there are reasons like that the value `auto` is unknown and has to be calculated first. Still, you can read out the property height as a value and  it’s the thing you want as a webdeveloper and it worked in some earlier versions of Chrome if I recall correctly.

Furthermore in the following example the animation renders differently in different browsers.

The latest Firefox (10.0.2) can animate from numbers to percentage. Opera and Chrome can’t, Firefox 9 couldn’t.

No browser can animate to a value auto, which is IMHO we want all.

Leave a Reply