This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 28252 - Overflow clipping should not always create stacking context
Summary: Overflow clipping should not always create stacking context
Status: RESOLVED MOVED
Alias: None
Product: CSS
Classification: Unclassified
Component: Transforms (show other bugs)
Version: unspecified
Hardware: PC Windows NT
: P2 normal
Target Milestone: ---
Assignee: Simon Fraser
QA Contact: public-css-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-03-21 08:38 UTC by Tien-Ren Chen
Modified: 2017-01-13 18:12 UTC (History)
7 users (show)

See Also:


Attachments

Description Tien-Ren Chen 2015-03-21 08:38:32 UTC
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.)
Comment 1 Tien-Ren Chen 2015-03-21 08:46:32 UTC
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.
Comment 2 Simon Fraser 2015-03-28 22:26:56 UTC
Hmm, that is a problem.
Comment 3 Joe Pea 2016-09-26 18:07:08 UTC
@Tien, please, can you revert the changes in Chrome 53 until we fix issues with the spec?
Comment 4 Simon Fraser 2017-01-13 18:12:45 UTC
https://github.com/w3c/csswg-drafts/issues/921