Re: Transitioning top and bottom properties.

On May 30, 2011, at 8:30 AM, Simon Fraser wrote:

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

Is there any possibility for figuring out what the right thing is, and getting that into the spec and implementations? Transitioning to and from 'auto' for width, height, and the trbl positioning properties is a gigantic use case. 'Auto' has got to be the most common value for those properties, and transitioning from that to a specific length is extremely useful.

Received on Monday, 30 May 2011 15:52:44 UTC