Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Top layer research #4633

domenic opened this issue May 16, 2019 · 1 comment


Copy link

commented May 16, 2019

This is a continuation of explorations in #897 and #4535 about the discussions on exposing the "top layer" primitive to web developers, instead of just to <dialog> and fullscreen. /cc @idoros @tabatkins @muan @alice as folks I've chatted with about this recently.

For this issue, let's focus on top-layer only, not on the focus/tab-trapping/inertness aspects of "blocking elements" that are explored in #897. We can continue the discussion about how those fit together in #897; I want to keep this more tightly scoped.

I suspect ultimately any solution here may end up in CSS, not HTML, but let's start some discussions focused on the research and problem space here.

My team at Chrome is interested in exploring this space, but we think there's a decent bit of research to do first. Some questions that come to mind in particular:

  • Native desktop platforms have very complicated layering: e.g. you can have dialogs, nested dialogs, modal dialogs, right-click menus, dropdown <select>-style menus, tooltips... All of these things are kind of competing for being "on top", and yet I've almost never noticed something going wrong and something appearing in an order that I as the user did not expect. How do they accomplish that? What programming model do they present to their app developers?
  • Native mobile platforms have less complexity, but still some interesting interactions: e.g. toasts, press-and-hold menus, action sheets, modals. Same question---what programming model enables this?
  • Some web toolkits, especially ones that are meant for use in a "pervasive" way that controls the entire page like AMP and Bootstrap, similarly coordinate among their various components to manage this. (They can do so successfully without a platform primitive because they control everything on the page.) Similarly, probably individual web apps have imposed a coordination hierarchy on the controls they use, even if it's just with pre-defined z-index values. What does that look like?

Some technologies that I can imagine being involved, but without research I have no evidence around, are:

  • Multiple "top" layers. E.g., one per modal dialog, to ensure that a modal dialog is above anything that appears below it, but that within the modal dialog, there can still be other top-ish things like right-click menus.
  • A fixed number of top layers (perhaps per dialog/window): e.g. one for menus, one for toasts, one for dropdowns.

Any help on this research, perhaps from people with a background in these technologies, would be appreciated.


This comment has been minimized.

Copy link

commented Jul 16, 2019

fwiw this is how I have been managing layers in React for a while and it works well. A practical application can be found here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.