Transitioning top and bottom properties.

Consider the following test case: http://jsfiddle.net/An6vn/3/

Here, the point is to have a container of set size (eg. an image) with a caption attached to the bottom of it.
The caption would have a single line that provides the name of the image, after which a paragraph of description could follow.
The case demonstrates a style where only the first line is visible by default and the rest appears on hover, by means of transitioning from top:100%; margin-top:-1em; -> top:auto; bottom:0;

Without transitioning, this works very well.  Add CSS transitioning and Chrome transitions the top to 0 (moving the caption all the way to the top), after which the caption suddenly appears on the very bottom (applying bottom:0).
Firefox refuses to transition to auto, at all.

I would expect that each would determine the begin and end y-position of the caption relative to its parent in each instance and transition from one to the other.  Unfortunately, this isn't how it works.

Any input?

Received on Sunday, 29 May 2011 21:58:33 UTC