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

Re: Proposal: will-animate property

From: Alan Gresley <alan@css-class.com>
Date: Wed, 04 Dec 2013 20:46:22 +1100
Message-ID: <529EF9EE.90102@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 4/12/2013 12:06 PM, Ali Juma wrote:
> On Tue, Dec 3, 2013 at 7:35 PM, Alan Gresley <alan@css-class.com> wrote:
>
>> On 4/12/2013 9:06 AM, Ali Juma wrote:
>>
>>   To see why it would helpful for some will-animate values other than "auto"
>>> to not create a stacking context, consider the following example:
>>> http://jsfiddle.net/6rUyf/
>>>
>>
>> Agree.
>>
>>
>>   There's a list of items and a pop-up menu attached to one of them (more
>>> generally, there might be pop-ups associated with each item). Say the
>>> author would like be able to animate the items' positions, and also wants
>>> the pop-up to move with its parent item and stay above the other items. In
>>> this case, transform animations cannot be used, since applying transforms
>>> to the items will turn them into stacking contexts, causing the pop-up to
>>> pop underneath other items.
>>>
>>
>> I don't understand. You already have established a stacking context by
>> using position:relative for each item. This will cause problems to begin
>> with. It needs to be placed on the list itself. Please examine the below
>> code.
>>
>
> Not quite; since the items still have z-index 'auto', position:relative
> doesn't make each item a stacking context, it just makes the item be the
> containing block for the position:absolute popup.

I did stay that position:relative *established* a stacking context. I 
should also have mentioned that it's for it children. The spec [1] 
(9.9.1) does state this:

   | Stacking contexts are not necessarily related to
   | containing blocks.



> 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


1. http://www.w3.org/TR/CSS21/visuren.html#z-index


Alan



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 4 December 2013 09:46:52 UTC

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