- From: Alan Gresley <alan@css-class.com>
- Date: Sat, 07 Dec 2013 00:46:49 +1100
- 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