New issue
Advanced search Search tips

Issue 618721 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Jun 2016
Cc:
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

CSS containment: content mucks with stacking layers

Project Member Reported by ericbidelman@chromium.org, Jun 9 2016 
Version: Canary 53.0.2763.0 canary (64-bit)
OS: Mac 10.11.5

What steps will reproduce the problem?
(1) visit http://jsbin.com/liwaqaqage/edit?html,output
(2) click the pink button


The pink button plays the ripple animation since `contain: content;` is added to the :host (better-button>. However, when you remove `contain: content;` from better-button, the .ripple no longer shows. The layering changes. z-index: 0 on better-button will also fix this (e.g. http://jsbin.com/nukupofiyi/edit?html,output)

Comment 1 by r...@opera.com, Jun 9 2016 

"contain:content" should make the element establish a new stacking context according to https://drafts.csswg.org/css-containment/#paint-containment

What exactly is the claimed bug here?

Comment 3 by r...@opera.com, Jun 9 2016 

Yes, but that's per spec afaict. The outer element with contain:content establishes a stacking context, and the element's background should be painted before descendants with negative z-index per https://www.w3.org/TR/2016/WD-CSS22-20160412/zindex.html#painting-order

Comment 4 by ericbide...@google.com, Jun 9 2016 

You may want to point that out on https://bugs.webkit.org/show_bug.cgi?id=158550#c1. I was told this was a blink bug.

Feel free to close this issue.

Comment 5 by r...@opera.com, Jun 9 2016

Status: WontFix (was: Untriaged)
►

Sign in to add a comment