Re: Transitioning top and bottom properties.

On 31/05/2011 1:52 AM, Brad Kemper wrote:
>
> 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.


I would appreciate seeing use cases with width, height, etc with auto.

What you have with auto offsets are just placeholders for any offsets 
that have a value that _are not auto_. Anyway, you would have to change 
the behavior of how offset now work.

http://css-class.com/test/css/3/transitions/offset-auto-ltr.htm

http://css-class.com/test/css/3/transitions/offset-auto-rtl.htm


Note that Opera 11.11 does it all wrong since the absolutely positioned 
element (on the left with salmon background) stops the margin collapse 
of the first inflow element (div#move with "Hover Me"). To prove this, 
select margin-top: 200px.

Considering that transitions can cause elements to move around when 
resizing the viewport or perhaps CJK horizontal text becoming vertical 
text on a mobile due to orientation and many more reasons I can list, I 
think we just leave auto offsets alone.



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Tuesday, 31 May 2011 17:47:16 UTC