W3C home > Mailing lists > Public > www-style@w3.org > December 2013

Re: Proposal: will-animate property

From: Alan Gresley <alan@css-class.com>
Date: Sat, 07 Dec 2013 00:46:49 +1100
Message-ID: <52A1D549.2070305@css-class.com>
To: Dirk Schulze <dschulze@adobe.com>, Nat Duca <nduca@chromium.org>
CC: Robert O'Callahan <robert@ocallahan.org>, Ali Juma <ajuma@chromium.org>, www-style <www-style@w3.org>, "L. David Baron" <dbaron@dbaron.org>, Benoit Girard <bgirard@mozilla.com>, Matt Woodrow <matt@mozilla.com>, Cameron McCormack <cmccormack@mozilla.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Ojan Vafai <ojan@chromium.org>
On 6/12/2013 11:19 PM, Dirk Schulze wrote:
>
> On Dec 6, 2013, at 7:27 AM, Nat Duca <nduca@chromium.org> wrote:
>
>> Some folks try to get clever: - translateZ(0) when the element is
>> not moving, as a way to trick a layer But then they do a 2d
>> animation... using translate2d(x,y). This causes the element to
>> lose its stacking context, triggering a repaint and possibly other
>> unexpected behaviors.
>
> Short question off topic. What do you mean with “lose its stacking
> context”? Even 2D transforms create a stacking context and it should
> not lose it because of animations. Rather the opposite. In many
> implementations this even results in creating a layer.
>
> Greetings, Dirk

Agreed with Dirk.

Anyway, Chrome and Safari breaks the spec and when I read this, I 
wondered what was being done since the reverse seems more true.

If any part of an animation has a property and value that creates a 
stacking context, then the whole animation (from 0% to 100%) for a 
particular element is treated as if a stacking context was created. 
There are also other painting and stacking errors with transforms which 
I'm still investigating.

The below demo has a floated blue box on the left and a red rectangle 
that begins underneath the blue box.

http://css-class.com/test/bugs/webkit/stacking-context-animation.htm

This blue box should be blue until 33% while opacity is still '1'. It is 
handled correctly by Firefox, IE11 and in some respect, Opera (buggy).


For Firefox, IE11 and Opera, I see the following:

  0% to  33% - Blue.
33% to  66% - Red which changes to purple.
66% to 100% - Purple.


For Chrome, I see the following:

  0% to  33% - Red.
33% to  66% - Red which changes to purple.
66% to 100% - Purple.


For Safari 5.1.7 (on Windows), I see the following:

  0% to  33% - Red.
   for a ms  - Blue
  ?% to  66% - A type of crimson which changes to purple.
66% to 100% - Purple.


Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Friday, 6 December 2013 13:47:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:17 UTC