Re: [css3-2d-transforms][css3-3d-transforms] Clarify equivalency with position: relative

I agree that we need a way to do coordinate math for transformed elements. This was recently raised in the FX task force telecon.

We have an outstanding task to propose some new methods for CSS OM View for this. Suggestions are welcome.

Simon

On Oct 29, 2010, at 4:21 PM, Sylvain Galineau wrote:

> Related to this is whether transforms should affect CSSOM properties
> such as offsetLeft.
> 
> Currently, offsetLeft is unchanged however much you translate or scale
> the element. But it is reflects position:relative.
> 
> JS code that relies on these properties for overlays and other effects 
> will fail if any transform is applied to the element.
> 
>> -----Original Message-----
>> From: Sylvain Galineau
>> Sent: Friday, October 22, 2010 7:56 PM
>> To: www-style list
>> Subject: [css3-2d-transforms][css3-3d-transforms] Clarify equivalency
>> with position: relative
>> 
>> In CSS3 2D Transforms[1], we have:
>> 
>> # The transform property does not affect the flow of the content
>> # surrounding the transformed element. However, the value of the
>> # overflow area takes into account transformed elements. This
>> # behavior is similar to what happens when elements are translated
>> # via relative positioning.
>> 
>> In CSS3 3D Transforms [2] :
>> 
>> # The object acts as though position: relative has been specified, but
>> also acts as a containing block for fixed positioned descendants.
>> 
>> This language is rather stronger e.g. it could be read as saying top
>> and left position the element like they would a position:relative
>> element. However, in the perspective property definition [3], we have:
>> 
>> # ...It also establishes a containing block (somewhat similar to
>> position:relative),
>> 
>> Which would imply it's not supposed to act as though it was
>> position:relative.
>> 
>> Given current implementations, I assume 2D Transforms and 3D's
>> perspective property define the intended behavior ?
>> 
>> [1] http://www.w3.org/TR/css3-2d-transforms/
>> [2] http://www.w3.org/TR/css3-3d-transforms/
>> [3] http://www.w3.org/TR/css3-3d-transforms/#perspective-property
>> 
> 
>