[WIP] overcome stacking context #155

valdrinkoshi · 2016-04-11T23:31:44Z

Update

Polymer 2.0-preview will no longer produce type-extension elements (aka is="...") (rationale here), hence we won't merge this PR as it introduces new custom elements extending <template>.

Further work is being done in https://github.com/PolymerLabs/iron-overlay

Further discussion on the issue and how the platform can help users here whatwg/html#2525

The problem

Overlays that are contained into a stacking context that is not the main one (the one of document.body) can have positioning problems, cropping, be non-interactive (see example). This is a known limitation mentioned also in the docs:

You must ensure no element has a stacking context with a higher z-index than its parent stacking context. You should place this element as a child of <body> whenever possible.

These are some stacking-context-related issues from components relying on iron-overlay-behavior:
PolymerElements/paper-dialog#7
Polymer/polymer-starter-kit#154
PolymerElements/paper-dialog#79
PolymerElements/paper-dialog#44
PolymerElements/paper-drawer-panel#122

Proposal

Contain overlays in templates so they are attached only once in the document
Stamp them and append them into The Right Place™
Allow content distribution into the overlays contained in an element's shadowDOM (e.g. paper-menu-button use case)

This is achieved with 4 components:

iron-overlay-template

It is a template that takes care of stamping the overlay and delegating the attach to the listeners of the event iron-overlay-template-attach. Styles can be added into the template, they’ll be appended into the shadowDOM as well. It provides a handy pointer to the overlay instance (myTemplate.overlay).

iron-overlay-container

It is the Right Place™. It listens to the iron-overlay-template-attach event and appends the overlay in its shadowDOM (so that style encapsulating is guaranteed). You can declare multiple instances (e.g. 1 container for toasts and 1 for dialogs).

iron-overlay-content-template

It is a template that stamps and appends its content into contentParent. This is needed by elements that host an overlay into their shadowDOM and want to distribute content in them, e.g. paper-menu-button needs to distribute dropdown content into the iron-dropdown declared in its shadowDOM.

iron-overlay-host-behavior

It searches for the iron-overlay-template in the shadowDOM and sets it as the contentParent of the iron-overlay-content-template in the lightDOM (the distributed one).

This changes the markup of the user of your element like this:

<!-- this div creates a new stacking context -->
<div style="transform: translateZ(0)">
  <!-- it will have stacking context issues -->
  <paper-dialog id="dialog" modal></paper-dialog>
  <button onclick="dialog.open()">open</button> 

  <!-- it will be appended in the iron-overlay-container! -->
  <template id="dialogTemplate" is="overlay-template">
    <paper-dialog modal></paper-dialog>
  </template>
  <button onclick="dialogTemplate.overlay.open()">open</button> 

  <!-- it will have stacking context issues -->
  <paper-menu-button>
    <button class="dropdown-trigger">open</button>
    <div class="dropdown-content">Content</div>
  </paper-menu-button>

  <!-- assuming it implements iron-overlay-host-behavior -->
  <paper-menu-button>
    <button class="dropdown-trigger">open</button>
    <!-- it will be stamped into the overlay -->
    <template is="overlay-content">
      <div class="dropdown-content">Content</div>
    </template>
  </paper-menu-button>
</div>
<!-- this is where I want the overlays to be contained -->
<iron-overlay-container></iron-overlay-container>

Styling

The content of an iron-overlay-template will be added into an iron-overlay-container's root, so one could define styles into the template:

<template is="overlay-template">
  <style> 
    paper-dialog { background-color: yellow; }
  </style>
  <paper-dialog modal></paper-dialog>
</template>

Beware that this applies to all the paper-dialogs that will be contained in an iron-overlay-container.

If you are an element author which hosts an overlay into its shadowDOM, you might want to namespace it, so that its styles won't conflict with other overlays of the same kind:

<dom-module id="my-element">
<template> 
  <content></content>
  <template is="overlay-template">
    <style>
      paper-dialog.my-element-dialog { background-color: orange; }
    </style>
    <paper-dialog class="my-element-dialog" modal></paper-dialog>
  </template>
</template>
...

Note for element authors using iron-host-behavior: Polymer currently removes all style nodes from a template, so as a temporary solution you'll need to use <script type="css"> instead of <style>.

notwaldorf · 2016-04-12T01:25:50Z

iron-overlay-container.html

+<link rel="import" href="iron-overlay-manager.html">
+
+<!--
+`iron-overlay-container` stamps overlays to `document.body` in order to avoid


'stamps' is a bit of a pedantic term. Can we use something more user friendly? Adds? Creates?

valdrinkoshi · 2016-04-12T02:37:42Z

@notwaldorf feedback incorporated!

@cdata FYI, here's the PR for overlays 2.0

Fixes PolymerElements/paper-dialog#7 Fixes Polymer/polymer-starter-kit#154 Fixes (maybe) PolymerElements/paper-dialog#79 Fixes (maybe) PolymerElements/paper-dialog#44 Fixes (maybe) PolymerElements/paper-drawer-panel#122 Related to PolymerElements#72 Related to PolymerElements#86 Related to https://github.com/PolymerElements/iron-overlay-behavior/compare/backdrop-refit Fixes (maybe) PolymerElements/paper-dialog-behavior#78 Fixes PolymerElements/app-layout#155

zixsma · 2017-01-12T03:50:54Z

@valdrinkoshi Any update on this one?

Tigerino · 2017-02-15T10:26:39Z

Any update?

valdrinkoshi · 2017-02-15T21:37:31Z

@Tigerino @zixsma sorry for the late reply. I've updated this PR's description with more info. In short with Polymer 2.0 we'll be able to extend from another custom element but not from the native elements like template, input, a etc, hence the idea is to have a new custom element, iron-overlay, which knows how to handle a <template> child (aka stamp it in a stacking context safe place).

valdrinkoshi · 2017-02-15T21:37:57Z

Will close this PR but keep the branch 👌

googlebot added the cla: yes label Apr 11, 2016

valdrinkoshi force-pushed the stacking-context branch 3 times, most recently from e78b795 to 499faa5 Compare April 12, 2016 00:51

notwaldorf reviewed Apr 12, 2016
View reviewed changes

valdrinkoshi force-pushed the stacking-context branch 7 times, most recently from 105714e to 1c4da0f Compare April 14, 2016 21:56

valdrinkoshi changed the title ~~[WIP] iron-overlay-container to overcome stacking context~~ [WIP] overcome stacking context Apr 14, 2016

valdrinkoshi force-pushed the stacking-context branch 7 times, most recently from d390e91 to 194de78 Compare April 21, 2016 19:44

valdrinkoshi mentioned this pull request Apr 27, 2016

Dialog not positioned correctly if parent has transform: scale(x) PolymerElements/paper-dialog#105

Closed

dominikIncibit mentioned this pull request Apr 28, 2016

Dialog sometimes hidden vaadin/vaadin-date-picker#133

Closed

valdrinkoshi force-pushed the stacking-context branch 2 times, most recently from e8a1e24 to f28c01d Compare May 2, 2016 19:36

valdrinkoshi mentioned this pull request May 3, 2016

fix: make overlay display over backdrop, by appending overlay to body #165

Closed

valdrinkoshi force-pushed the stacking-context branch from b7b2f91 to 38ee299 Compare May 3, 2016 18:30

valdrinkoshi mentioned this pull request May 4, 2016

Model paper-dialog not working correctly within a polymer-starter-kit app Polymer/polymer-starter-kit#154

Closed

valdrinkoshi added 7 commits May 18, 2016 14:18

demo - close dropdown after selection

8fe0509

handle styles (temp). Insert overlays in container root

f978486

insert before backdrop

a7b5d75

demo styles

de20518

docs for host behavior. Get overlay by querying the root.

f3c7932

no need to force dom=shadow

8454087

update docs for all elements

af80454

valdrinkoshi force-pushed the stacking-context branch from fd21f6d to ef0e54e Compare May 18, 2016 21:44

add links in docs

f53025c

valdrinkoshi force-pushed the stacking-context branch 2 times, most recently from ae8febf to 8b62268 Compare May 18, 2016 21:57

use polymer latest release

7872cfa

valdrinkoshi force-pushed the stacking-context branch from 8b62268 to 7872cfa Compare May 18, 2016 21:58

valdrinkoshi added 4 commits May 25, 2016 16:01

add iron-overlay-container into body if overlay is not attached.

03b972e

update demo

4e42277

lazy stamp and attach of overlays

1df26f9

consider the first child to be the overlay

17a0975

valdrinkoshi force-pushed the stacking-context branch from 2ded959 to 17a0975 Compare May 26, 2016 01:08

delegate attach/detach to container.

8f7d03c

nocquidant mentioned this pull request Jul 4, 2016

Set the date programmatically? motss/app-datepicker#26

Closed

dwalters18 mentioned this pull request Jul 20, 2016

paper-menu doesn't display on foreground PolymerElements/paper-menu-button#9

Open

valdrinkoshi mentioned this pull request Jul 21, 2016

Backdrop in front of overlay on iOS #208

Closed

zbury mentioned this pull request Feb 13, 2017

Overlay with-backdrop prevents menu click vaadin/vaadin-context-menu#69

Closed

valdrinkoshi closed this Feb 15, 2017

valdrinkoshi mentioned this pull request Jun 30, 2017

paper-dialog appears behind backdrop when inside a <app-header-layout> PolymerElements/paper-dialog#152

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] overcome stacking context #155

[WIP] overcome stacking context #155

valdrinkoshi commented Apr 11, 2016 •

edited

Loading

notwaldorf Apr 12, 2016

valdrinkoshi commented Apr 12, 2016

zixsma commented Jan 12, 2017

Tigerino commented Feb 15, 2017

valdrinkoshi commented Feb 15, 2017

valdrinkoshi commented Feb 15, 2017

[WIP] overcome stacking context #155

[WIP] overcome stacking context #155

Conversation

valdrinkoshi commented Apr 11, 2016 • edited Loading

Update

The problem

Proposal

iron-overlay-template

iron-overlay-container

iron-overlay-content-template

iron-overlay-host-behavior

Styling

notwaldorf Apr 12, 2016

Choose a reason for hiding this comment

valdrinkoshi commented Apr 12, 2016

zixsma commented Jan 12, 2017

Tigerino commented Feb 15, 2017

valdrinkoshi commented Feb 15, 2017

valdrinkoshi commented Feb 15, 2017

valdrinkoshi commented Apr 11, 2016 •

edited

Loading