W3C home > Mailing lists > Public > public-css-bugzilla@w3.org > March 2015

[Bug 28252] Overflow clipping should not always create stacking context

From: <bugzilla@jessica.w3.org>
Date: Sat, 21 Mar 2015 08:46:32 +0000
To: public-css-bugzilla@w3.org
Message-ID: <bug-28252-5148-JUwBRk5B1s@http.www.w3.org/Bugs/Public/>
https://www.w3.org/Bugs/Public/show_bug.cgi?id=28252

--- Comment #1 from Tien-Ren Chen <trchen@chromium.org> ---
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.

-- 
You are receiving this mail because:
You are the QA Contact for the bug.
Received on Saturday, 21 March 2015 08:46:33 UTC

This archive was generated by hypermail 2.3.1 : Saturday, 21 March 2015 08:46:33 UTC