Change <dialog> from position: absolute to position: fixed.

Blink shipped the <dialog> element[1] using a somewhat complex positioning scheme. The CSSWG discussed a change to this positioning scheme using "position: fixed" instead, and auto-margins to achieve centering. See [2]. We believe this should be broadly compatible with existing using (as the dialog is placed in the "top-layer"). [1] https://html.spec.whatwg.org/#the-dialog-element [2] https://github.com/w3c/csswg-drafts/issues/4645

Motivation

Blink shipped the <dialog> element[1] using a somewhat complex positioning scheme. The CSSWG discussed a change to this positioning scheme using "position: fixed" instead, and auto-margins to achieve centering. See [2]. We believe this should be broadly compatible with existing using (as the dialog is placed in the "top-layer"). We added two use-counters to ensure that this had a high change of being web-compatible: https://www.chromestatus.com/metrics/feature/timeline/popularity/3329 https://www.chromestatus.com/metrics/feature/timeline/popularity/3330 Broadly speaking the largest change from the perspective of web-developers will be the dialog's width/height will have an upper limit of the size of the viewport, and the dialog itself will scroll (instead of the viewport) if it overflows. The above use-counters capture when this might occur on existing sites, and we belive this is succientiently low. In implementing the <dialog> element, Firefox implemented the "position: fixed" positioning scheme. [1] https://html.spec.whatwg.org/#the-dialog-element [2] https://github.com/w3c/csswg-drafts/issues/4645

Specification

Editor's draft

Status in Chromium

Blink


No active development

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Last updated on 2020-10-30