Re: [css-transforms] 'perspective' establishing stacking context and containing block

On Feb 22, 2014, at 10:35 am, L. David Baron <dbaron@dbaron.org> wrote:

> http://dev.w3.org/csswg/css-transforms/#perspective-property says:
>  # The use of this property with any value other than none
>  # establishes a stacking context. It also establishes a containing
>  # block (somewhat similar to position: relative), just like the
>  # transform property does.
> 
> This doesn't make a whole lot of sense to me.  The normal reason for
> doing this things is because the effect requires the entire element
> to be visually atomic (as with opacity, mix-blend-mode, 3-D
> transforms) or because the element changes coordinate systems (as
> with all transforms).
> 
> However, as I understand it, the 'perspective' property doesn't
> actually do any of these things to the element on which the property
> is set; it does these things to that element's 3-D transformed
> children [1] (which in turn already establish stacking contexts and
> containing blocks because of the transform property).
> 
> So it seems odd to me that 'perspective' causes these effects.
> 
> 
> That said, it's what the spec says, and it's what Safari appears to
> do (at least mobile Safari on iOS 6.1.6), so I'm inclined to change
> Gecko (which doesn't currently do these things) to match, assuming
> that other Gecko developers agree with this approach.  I'm curious,
> though, if others feel the spec should change.
> 
> Tests are at:
>  http://dbaron.org/css/test/2014/perspective-stacking-context
>  http://dbaron.org/css/test/2014/perspective-containing-block-abs
>  http://dbaron.org/css/test/2014/perspective-containing-block-fixed
> and also permanently archived at:
>  http://lists.w3.org/Archives/Public/www-archive/2014Feb/0021.html
> 
> -David
> 
> [1] ... or 3-D transformed descendants within the same 3-D rendering
> context

You’re correct in that perspective doesn’t strictly-speaking have to create
stacking context; it simply provides a transformation matrix that is multiplied
into the transforms of descendants that are affected by the perspective.

However, in the OS X and iOS implementations, the underlying CA framework
applies perspective through the “sublayer transform” property of a Core Animation
layer, and so specifying it this way makes the implementation easier. This is particularly
true when that same framework is being used to run transform animations, making it
not possible to simply do the transform math in the WebKit code on every frame.

Simon

Received on Sunday, 23 February 2014 06:38:58 UTC