New issue
Advanced search Search tips

Issue 611146 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Jun 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

[MD settings] Opening a dialog clips the dialog and puts up a scrim

Project Member Reported by dschuyler@chromium.org, May 11 2016

Issue description

Open chrome://md-settings.
Select Advanced and then Clear Browsing Data
(or anything that brings up a settings dialog).

The dialog is clipped on the left and there is
a scrim covering the window.

It appears to be introduced by 
https://codereview.chromium.org/1966543002
 

Comment 1 by dbeam@chromium.org, May 11 2016

Cc: dbeam@chromium.org
what is a scrim?

(i can't build right now because i'm having disk problems >_<)

Comment 3 by dbeam@chromium.org, May 11 2016

scrim is the semi-opaque, greyed-out area visually "below" a dialog, but "above" the page (on the z axis)
ok, you're talking about the iron-overlay-backdrop

from https://github.com/PolymerElements/iron-overlay-behavior:

"The element is styled to appear on top of other content by setting its z-index property. You must ensure no element has a stacking context with a higher z-index than its parent stacking context."

that sounds kind of crazy, isn't the point of a stacking context that it has its own ordering independent of its parent stacking context?
the backdrop is implemented as an element in <body> with a z-index of 103, and the dialog gets a z-index of 102. this works unless the dialog is within another stacking context, in which case it's hidden behind the backdrop.

before my cl, the tree was:

* html
|   settings stuff...
|       paper-header-panel
|         * settings-dialog
| * iron-overlay-backdrop

where each * is a stacking context, so iron-overlay-backdrop was drawn over settings-stuff but under settings-dialog.

after my cl:

* html
|   settings stuff...
|     * paper-header-panel
|         * settings-dialog
| * iron-overlay-backdrop

so now iron-overlay-backdrop is drawn over paper-header-panel, meaning it's also over settings-dialog.


the question is whether there's another solution besides "don't use z-index for anything" which, like, won't really work
Here is a simplified version of this problem:

https://jsfiddle.net/xLhL6dmd

In fact, before my changeu we already could have the above situation if a dialog's <settings-section> is expanding or collapsing while the dialog is open (which shouldn't happen, but it shows the general nature of the problem).
Project Member

Comment 7 by bugdroid1@chromium.org, May 12 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a949965662f9ed28175288034aa45a3b4649e036

commit a949965662f9ed28175288034aa45a3b4649e036
Author: michaelpg <michaelpg@chromium.org>
Date: Thu May 12 00:35:10 2016

Revert "MD Settings: Expanding cards should not overlap header"

This partially reverts commit 57b3eadebbb95a01dc932c14654032eab5b8013a.

The original CL, crrev.com/1966543002/, worked as intended, but made dialogs not usable. Since the original CL addressed a minor visual glitch, revert it for now so we can continue developing dialogs.

BUG= 611146 
R=dbeam@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/1964243005
Cr-Commit-Position: refs/heads/master@{#393122}

[modify] https://crrev.com/a949965662f9ed28175288034aa45a3b4649e036/chrome/browser/resources/settings/settings_ui/settings_ui.html

Labels: Hotlist-MD-Settings-General
Status: Fixed (was: Assigned)

Sign in to add a comment