- From: Simon Fraser <simon.fraser@apple.com>
- Date: Mon, 05 Mar 2012 12:05:43 -0800
- To: Aryeh Gregor <ayg@aryeh.name>
- Cc: public-fx@w3.org, "L. David Baron" <dbaron@dbaron.org>, Matt Woodrow <mwoodrow@mozilla.com>
On Mar 5, 2012, at 11:19 AM, Aryeh Gregor wrote: > Bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15871 > > When transform-style: preserve-3d is specified, the element and its > children are rendered as 3D objects. What happens if opacity is > specified on the same element? Test-case: > > data:text/html,<!doctype html> > <div style="transform-style: preserve-3d"> > <div style="transform-style: preserve-3d; opacity: 0.8"> > <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 style="height:100px; width:100px; background:yellow; > transform: translate3d(50px, -175px, -20px)"></div> > </div> > > Questions: > > 1) What order do the boxes render? Without the opacity, it should be > the green box on top of the red box on top of the yellow box (in order > of Z-coordinate). This is how Chrome 19 dev behaves with opacity. > Firefox 13.0a1 puts the yellow box on top of the green box on top of > the red box. The current spec seems to imply that the yellow box > should be on top of the red box on top of the green box (in DOM > order), because it says the transform-style of an element with opacity > is always flat. Chrome's behavior certainly makes the most sense, > because it's surprising that opacity would affect Z-ordering. > > 2) Should the red box be partly visible through the green box? In > Chrome it is; in Firefox it's not. There seems to be agreement that > Firefox's behavior is correct here; see > <http://lists.w3.org/Archives/Public/www-style/2011Nov/0244.html> and > followups. > > (If anyone has access to a copy of Safari on Mac, I'd be interested to > hear how it behaves.) > > So it seems to me like Chrome makes more sense for (1) and Firefox > makes more sense for (2). The problem is, I've been told > <https://www.w3.org/Bugs/Public/show_bug.cgi?id=15871#c6> we can't > have both. If opacity is applied to the whole group, it has to be > flattened first, so in this case the yellow square will be topmost > (like Firefox). If there's no flattening, it has to be applied to the > individual boxes, so in this case you'll be able to see the red box > through the green one (like Chrome). Is this correct -- there's no > way to have both behaviors? If so, which way do we want to go? The rendering should be identical to: data:text/html,<!doctype html> <div style="transform-style: preserve-3d"> <div style="transform-style: flat; opacity: 0.8"> <!-- note 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 style="height:100px; width:100px; background:yellow; transform: translate3d(50px, -175px, -20px)"></div> </div> It should look like this: <https://www.w3.org/Bugs/Public/attachment.cgi?id=1087> (note that W3C bugzilla is lame and will cause you to download this image). Simon
Received on Monday, 5 March 2012 20:06:33 UTC