Intent to Ship: CSS overlay property

Skip to first unread message

Joey Arhar

Apr 17, 2023, 7:12:15 PM4/17/23
to blink-dev

Contact emails




Introduce a overlay property to allow authors to keep elements in the top layer for an exit transition. The overlay property is added to indicate if an element is in the top layer or not. It can take two values: 'none', 'browser'. User agent stylesheets add !important rules to control whether elements are rendered in the top layer or not, and not let author styles override. However, authors can add overlay to the list of transition-properties for an element to defer the removal from the top-layer for the duration of the transition. That way the author can do exit transitions for elements like dialogs: transition-property: overlay transition-duration: 0.4s

Blink component


TAG review

TAG review status



Interoperability and Compatibility

Gecko: No signal (

WebKit: No signal (

Web developers: No signals

Other signals:


This will be used in tandem with CSSTransitionDiscrete, CSSDisplayAnimation, the dialog element, and the popover attribute as described here: Usage of this API will not make it hard for Chrome to maintain good performance.


I'm not sure if this and the other new animations features are polyfillable. Documentation will definitely be helpful.


This CSS feature does not pose any security or privacy risks.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

This feature does not deprecate or change any APIs and does not have any WebView risk.


DevTools now has special support for the top layer. I don't think this CSS property will change or impose on how that works in DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?


Is this feature fully tested by web-platform-tests?


Flag name


Requires code in //chrome?


Tracking bug

Availability expectation

Feature is available on Web Platform mainline within 12 months of launch in Chrome.

Adoption expectation

Feature is considered a best practice for some use case within 12 months of reaching Web Platform baseline.

Adoption plan

This feature will be the best practice for animating top layer elements because it is the only way to do so. The CSSWG resolutions are a good sign that the other browsers will implement this.

Sample links

Estimated milestones

Shipping on desktop114
DevTrial on desktop114
Shipping on Android114
DevTrial on Android114
Shipping on WebView114

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

There are no anticipated spec changes.

Link to entry on the Chrome Platform Status

Links to previous Intent discussions

Intent to prototype:

This intent message was generated by Chrome Platform Status.

Rick Byers

Apr 25, 2023, 10:50:34 AM4/25/23
to Joey Arhar, blink-dev
Hi Joey,
I'm excited for this to ship. I see that there's some feedback from the TAG and concern from the WG about at least one open spec issue. Please let us know here when you feel that either the feedback has been resolved or that a good faith effort to reach consensus has been made but we're at an impasse and should ship despite the disagreements.


You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To view this discussion on the web visit

Joey Arhar

May 3, 2023, 12:08:17 PM5/3/23
to Rick Byers, blink-dev
The CSSWG issue hasn't received any actionable feedback yet, and the TAG feedback wasn't about overlay but about @initial and display animation.

Rick Byers

May 24, 2023, 10:56:58 AM5/24/23
to Joey Arhar, blink-dev
Looking over the discussion that's happened over the past month it seems some confusion has been resolved and some improvements made to the spec. I don't see evidence of outstanding concrete points of disagreement. That, of course, doesn't mean others feel it's ready to ship (would be nice to see #8730 resolved for that). But as far as I can see, it's not blocked on us doing anything specific. 

So LGTM1 to ship

Mike West

May 24, 2023, 12:00:15 PM5/24/23
to Rick Byers, Joey Arhar, blink-dev
I agree that which the TAG pointed to seems tangential to `overlay`. It's somewhat unfortunate, though, that we don't seem to have responded to their feedback in the month since they gave it.

The conversation in seems to be converging, and the open question remaining seems to be one that we could ~easily reverse if we were convinced that we needed to post-shipping.



Philip Jägenstedt

May 31, 2023, 11:45:48 AM5/31/23
to Mike West, Rick Byers, Joey Arhar, blink-dev

Joey, can make sure to respond on as well? I don't think the feedback necessitates changes, but it would be great to make it clear on the issue.

Reply all
Reply to author
0 new messages