Re: Interaction between opacity and transform-style

On Mon, Mar 5, 2012 at 3:35 PM, Simon Fraser <simon.fraser@apple.com> wrote:
> The screenshot was taken from Safari with the snippet above (prefixed,
> with 0.5 opacity because otherwise the yellow is impossible to see behind
> the other boxes).

Okay, so just to make sure we're all on the same page:

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1361

If I open that link in Firefox 13.0a1 and change all the -webkit- to
-moz-, the yellow box is on top of the red box, and the red box is on
top of the green box, like

data:text/html,<!doctype html>
<style>div {
height: 100px;
width: 100px;
opacity: 0.5;
position: absolute;
}</style>
<div style="height:50px; left:0; top:0; background: lime"></div>
<div style="left:0; top:50px; background: red"></div>
<div style="left:50px; top:25px; background: yellow; opacity: 1"></div>

If I open it in Chrome 19 dev (avoiding the XSS protection), I get the
red box on top of the green box, and both boxes on top of the yellow
box, exactly like this:

data:text/html,<!doctype html>
<style>div {
height: 100px;
width: 100px;
opacity: 0.5;
position: absolute;
}</style>
<div style="left:50px; top:25px; background: yellow; opacity: 1"></div>
<div style="height:50px; left:0; top:0; background: lime"></div>
<div style="left:0; top:50px; background: red"></div>

In a Safari/WebKit nightly on Windows, the green box is on top of the
red box, like in your screenshot, the same as this:

data:text/html,<!doctype html>
<style>div {
height: 100px;
width: 100px;
opacity: 0.5;
position: absolute;
}</style>
<div style="left:50px; top:25px; background: yellow; opacity: 1"></div>
<div style="left:0; top:0; background: lime"></div>
<div style="height:50px; left:0; top:100px; background: red"></div>

So forget about the opacity.  We don't have interop on an even simpler
test-case:

data:text/html,<!doctype html>
<div style="transform-style: preserve-3d">
 <div style="transform-style: flat">
  <div style="height:100px; width:100px; background:lime;
  transform: translatez(10px)"></div>
  <div style="height:100px; width:100px; background:red;
  transform: translate3d(0, -50px, -10px)"></div>
 </div>
</div>

Firefox 13.0a1 draws the red box on top.  Chrome 19 dev, and WebKit
nightly on Windows, draw the green box on top.  Both Chrome and WebKit
nightlies are wrong here, aren't they?  The two innermost divs aren't
part of any 3D rendering context, and should paint in DOM order
without respect to their Z-coordinate.  If you remove preserve-3d from
the outermost div, then both WebKit ports work the same as Firefox.

At this point I agree that Safari's rendering here is what we want,
but I don't think the markup you gave is supposed to produce that
rendering per spec.  Or am I misunderstanding "An element participates
in a 3D rendering context if its containing block establishes or
extends a 3D rendering context"?  What does "containing block" mean
here?  The CSS 2.1 definition
<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
says that the containing block for a statically-positioned element is
just the nearest block ancestor.

Received on Monday, 5 March 2012 21:15:46 UTC