- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 05 Dec 2013 03:16:50 +1100
- 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