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

Re: Proposal: will-animate property

From: Alan Gresley <alan@css-class.com>
Date: Thu, 05 Dec 2013 03:16:50 +1100
Message-ID: <529F5572.5050504@css-class.com>
To: Ali Juma <ajuma@chromium.org>
CC: Robert O'Callahan <robert@ocallahan.org>, "L. David Baron" <dbaron@dbaron.org>, Benoit Girard <bgirard@mozilla.com>, Matt Woodrow <matt@mozilla.com>, Cameron McCormack <cmccormack@mozilla.com>, www-style <www-style@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
On 5/12/2013 1:22 AM, Ali Juma wrote:
> On Wed, Dec 4, 2013 at 4:46 AM, Alan Gresley <alan@css-class.com> wrote:
>
>>
>>   With your suggested
>>> changes, applying a transform to an item will still cause the popup to pop
>>> under the other items (since applying a transform makes the item a
>>> stacking
>>> context).
>>>
>>
>> Did you test my changes or just assume that they would not work? A demo.
>>
>> http://css-class.com/test/temp/transform-stacking.htm
>
>
> I tested your changes in Chrome, replacing "transform" with
> "-webkit-transform". Applying a transform to the item with the popup does
> cause the popup to drop under the other items (I also tested with your
> posted demo, again replacing transform with -webkit-transform, with the
> same results).

Well that a Chrome bug.


> In Firefox, your demo works when the transform is only on
> exactly one item, but not when multiple items (say item 3 and item 4) have
> transforms.

I would expect that since each one creates a stacking context.

> I think this illustrates an important point: there are situations where
> authors want to move things around but cannot do so in a straightforward
> way using properties that create stacking contexts, so instead they animate
> using things like left and top; we need to make sure that in these
> situations, authors can use will-animate in a way that doesn't break their
> content (that is, in a way that doesn't create the stacking context they're
> trying to avoid in the first place).

I fully agree in practice.

I have put up another demo where each item has position:relative.

http://css-class.com/test/temp/transform-stacking2.htm

Please hover the item with the popup in Firefox. This is what I mean by 
creating a problem since when this item is hovered, item 4, 5, and 6 are 
covering it even thought the absolutely positioned popup has a z-index 
of 100.

There is no way to avoid such issues.

Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 4 December 2013 16:17:22 UTC

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