Intent to Ship: CSS overlay property

[Joey Arhar]

Contact emails

fut...@chromium.org, mas...@chromium.org, jar...@chromium.org

Explainer

https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Specification

https://drafts.csswg.org/css-position-4/#overlay

Summary

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

Blink>CSS

TAG review

https://github.com/w3ctag/design-reviews/issues/829

TAG review status

Pending

Risks

Interoperability and Compatibility

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/777)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/169)

Web developers: No signals

Other signals:

Ergonomics

This will be used in tandem with CSSTransitionDiscrete, CSSDisplayAnimation, the dialog element, and the popover attribute as described here: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md Usage of this API will not make it hard for Chrome to maintain good performance.

Activation

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

Security

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.

Debuggability

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)?

Yes

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

Yes

Flag name

CSSTopLayerForTransitions

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1411264

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

https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md#example-code

Estimated milestones

Shipping on desktop	114
DevTrial on desktop	114

Shipping on Android	114
DevTrial on Android	114

Shipping on WebView

114

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

https://chromestatus.com/feature/5138724910792704

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeR6ez7uK%2Bw2dNKxV2Bj_mv0F3eKHScYnxziaRUMdfpz%2Bw%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

[Rick Byers]

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.

Thanks,

   Rick

--
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 blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAK6btwLg270v8Yk1n_PqRRk%2Bn9v80jkOyX9jG4WwfMs0k5fL%3Dg%40mail.gmail.com.

[Joey Arhar]

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]

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]

I agree that https://github.com/w3c/csswg-drafts/issues/6429 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 https://github.com/w3c/csswg-drafts/issues/8730 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.

LGTM2.

-mike

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY_DWtsNe01t2ypCFU-LSSQDe4_c4Xj0eo8AXADAXyRKrA%40mail.gmail.com.

[Philip Jägenstedt]

LGTM3

Joey, can make sure to respond on https://github.com/w3ctag/design-reviews/issues/829 as well? I don't think the feedback necessitates changes, but it would be great to make it clear on the issue.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3DejH8DFLi7V%3DChJa8PSWnKjtXHhxWmCSW3mkkmMiPNosA%40mail.gmail.com.