[css-color] opacity and stacking context?

[Nadya678]

https://drafts.csswg.org/css-color/#icc-colors

There shall be no additional stacking context for the opacity. It works good and is used in many of sites with absolute, relative and fixed positioning for children. For example a menu with a "button" to show with animations to show it always on top.

There shall be only cleared that the children cannot have greater opacity than parent (IE issue) and that opacity:0 is not equivalent of visibility:hidden;

If I want stacking context I set position relative and z-index to 0.

Why new Editors Draft is not compatible with current behaviour of browsers and former specification?

[SelenIT]

The current draft has the following text about the opacity propery (https://drafts.csswg.org/css-color/#transparency) that seems to imply the same behavior regarding z-index as before:

If opacity has a value less than 1, the element forms a stacking context for its children. This means that any content outside of it cannot be layered in z-order between pieces of content inside of it, and vice versa. If the element is in a context where the z-index property applies, the auto value is treated as 0 for the element.

Also, it states that the opacity is applied to the element as a whole, including nested elements, so it's impossible to "undo" opacity for children by setting them greater opacity value:

The opacity property applies the specified opacity to the element as a whole, including its contents, rather than applying it to each descendant individually. This means that, for example, an opaque child occluding part of the element’s background will continue to do so even when opacity is less than 1, but the element and child as a whole will show the underlying page through themselves.

Doesn't this answer to your second concern (about children's opacity)?

[Loirooriol]

Not sure what makes you think that browsers don't create a stacking context when opacity is not 1. All Firefox, Chrome and Edge do, and I suspect changing this wouldn't be web compatible.

https://jsfiddle.net/x9448erq/

[Nadya678]

The parent opacity: 0.5, z-index:auto
The children opacity: 0.6, z-index:-1;

Rendered:
Parent: opacity 0.5
Children: opacity: 0.3=0.5*0.6, still behind <html/> container (if other elements also have z-index:auto).

but without stacking context.

the opacity is animated linear and there will be flickering at end of animation? It is bad solution. The opacity shall NOT CREATE stacking context.

Please try it in IE. FF and Cr. The behaviour is different.
https://jsfiddle.net/vuxg6zeo/

[SelenIT]

Based on the current spec, this looks like a bug in Microsoft browsers. It was even submitted to Microsoft back in 2013 (and closed as Won't Fix because of "the limited impact this bug may have" for IE10), but somehow this bug persists even in Edge 16.

[SelenIT]

there will be flickering at end of animation?

Per the current spec, there would be flickering when the opacity changes from 1 to any value other than 1 and back. It can be prevented by setting will-change:opacity that tells the browser to make all changes necessary for setting opacity, including stacking context creation, in advance, so the element with will-change:opacity always creates the stacking context and never flickers.

[svgeesus]

Closing as WONTFIX because this relates to a bug in a browser which is no longer being developed (IE) and another which has switched browser engine so no longer has the bug (Edge).