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

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:
and also permanently archived at:


[1] ... or 3-D transformed descendants within the same 3-D rendering

𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)

Received on Saturday, 22 February 2014 18:35:32 UTC