W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2012

Re: Interaction between opacity and transform-style

From: Simon Fraser <simon.fraser@apple.com>
Date: Mon, 05 Mar 2012 12:35:48 -0800
Cc: public-fx@w3.org, "L. David Baron" <dbaron@dbaron.org>, Matt Woodrow <mwoodrow@mozilla.com>
Message-id: <795FC33F-958F-4184-AF80-2150B2352364@apple.com>
To: Aryeh Gregor <ayg@aryeh.name>
On Mar 5, 2012, at 12:16 PM, Aryeh Gregor wrote:

> On Mon, Mar 5, 2012 at 3:05 PM, Simon Fraser <simon.fraser@apple.com> wrote:
>> 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>
> This has the red box on top of the green box, and the yellow box on
> top of both.  Is this really what we want?  I'd expect the green box
> on top of the red box, and both of them on top of the yellow box.
>> 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).
> I agree this picture is the rendering we want -- it has the green box
> on top of the red box on top of the yellow box.  transform-style: flat
> will give the reverse ordering in this case, so I don't think it's
> what we want.

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).

I'm not sure what you mean by "will give the reverse ordering".

Received on Monday, 5 March 2012 20:36:38 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:47 UTC