This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
In the latest draft (as of 2015/03/21) of CSS Transform, Section 10.1: Any overflow value other than 'visible' will force the used value of transform-style to 'flat'. Section 10: A value of "flat" for transform-style establishes a stacking context, and establishes a 3D rendering context. Therefore it is implied that whenever an overflow clip is specified, a stacking context must be created, breaking backward compatibility. If I understand correctly, in latest Safari(8.0.3) setting -webkit-transform-style:flat doesn't enforce a stacking context. In the case that we have both overflow:hidden and -webkit-transform-style:flat, no stacking context will be created. Flattening will still be done, but no 3D rendering context is created on the clipping container. It works as if each of the 3D-transformed descendants create their own 3D rendering context, and flattened individually. (i.e. No z-sorting is done, and they stack in the DOM tree order.)
For example: <div style="width:300px; height:200px; background-color:red; overflow:hidden;"> <div style="width:100px; height:100px; background-color:green; -webkit-transform:translateZ(0);"></div> <div style="width:100px; height:100px; background-color:blue; -webkit-transform:rotateY(60deg)translateY(-100px);"></div> </div> The green plane intersects the blue plane. Supposedly if they paint in the same 3D rendering context, only the left half of the blue plane will be visible. In this example, Safari paints the whole blue plane on top of the green plane. For another example, if we add a stacking context, even by non-transform-related properties: <div style="width:300px; height:200px; background-color:red; overflow:hidden; position:relative; z-index:0;"> <div style="width:100px; height:100px; background-color:green; -webkit-transform:translateZ(0);"></div> <div style="width:100px; height:100px; background-color:blue; -webkit-transform:rotateY(60deg)translateY(-100px);"></div> </div> In this example, a 3D rendering context is correctly created and z-sorting is done as expected.
Hmm, that is a problem.
@Tien, please, can you revert the changes in Chrome 53 until we fix issues with the spec?
https://github.com/w3c/csswg-drafts/issues/921