Re: Transitioning top and bottom properties.

On May 28, 2011, at 2:41 pm, Maarten Billemont wrote:

> 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.

Neither Chrome (really WebKit) nor Firefox do the right thing when transitioning to/from 'auto' values.

See the thread starting at <http://lists.w3.org/Archives/Public/www-style/2010Apr/0526.html>

Simon

Received on Monday, 30 May 2011 15:31:09 UTC