Re: Transforms and z-index (Was: [CSSWG] Minutes and Resolutions 2011-04-20)

CC Simon Fraser

On 22/04/2011 1:25 PM, Boris Zbarsky wrote:
> On 4/21/11 11:05 PM, Simon Fraser wrote:
>> On Apr 21, 2011, at 7:27 pm, fantasai wrote:
>>> smfr: Webkit has this just create a pseudo-stacking context (like
>>> 'opacity'
>>> does), but FF and maybe IE let z-index work.
>
> I'm not sure where the "maybe" comes from, given that there are previous
> posts on this very list saying that z-index works on transformed
> elements in Presto, Gecko, and IE9. As in, everything that implements
> transforms _except_ WebKit.


In the bug on Bugzilla [1], the only workaround for WebKit to stack 
anything higher is to use translateZ.


> I'm fine with the decision assuming the spec is actually clarified
> accordingly, since every single implementor who read it thought it meant
> that z-index should apply to transformed elements, but I really hope
> other decisions actually take mailing list discussion into account
> better...
>
> -Boris


This was going to be in a follow up reply to Simon's list message [2].

It is correct that transforms behave like opacity. I can confirm that 
all browsers currently layer a transformed element as if it had 
'position: relative' and 'z-index: 1'. This means that these transformed 
elements behave as if they have been positioned and have established a 
'new stacking context'.


A test.

http://css-class.com/test/css/3/transform/transition-painting-and-z-index.htm

A much cruder test.

http://css-class.com/test/css/3/transform/transition-painting-and-z-index2.htm


I believe that both the introductions of the editor's drafts for 2D 
transforms [3] and 3D transforms [4] should have similar wording as is 
seen with CSS3 3.2 Transparency: the ‘opacity’ property [5] and with 
similar links to the CSS2.1 spec.


   | Since an element with opacity less than 1 is composited
   | from a single offscreen image, content outside of it
   | cannot be layered in z-order between pieces of content
   | inside of it. For the same reason, implementations must
   | create a new stacking context for any element with
   | opacity less than 1. If an element with opacity less
   | than 1 is not positioned, implementations must paint
   | the layer it creates, within its parent stacking context,
   | at the same stacking order that would be used if it were
   | a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
   | If an element with opacity less than 1 is positioned,
   | the ‘z-index’ property applies as described in [CSS21],
   | except that ‘auto’ is treated as ‘0’ since a new stacking
   | context is always created. See section 9.9 and Appendix E
   | of [CSS21] for more information on stacking contexts.




[1] https://bug647494.bugzilla.mozilla.org/attachment.cgi?id=523831
[2] http://lists.w3.org/Archives/Public/www-style/2011Apr/0305.html
[3] http://dev.w3.org/csswg/css3-2d-transforms/#introduction
[4] http://dev.w3.org/csswg/css3-3d-transforms/#introduction
[5] http://www.w3.org/TR/css3-color/#transparency




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

Received on Friday, 22 April 2011 04:07:58 UTC