Contact emailsfuth...@chromium.org, mas...@chromium.org, jar...@chromium.org
Explainer https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md Specificationhttps://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 componentBlink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> TAG reviewhttps://github.com/w3ctag/design-reviews/issues/829 TAG review statusPending 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 <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ?Yes Flag nameCSSTopLayerForTransitions Requires code in //chrome?False Tracking bughttps://crbug.com/1411264 Availability expectationFeature is available on Web Platform mainline within 12 months of launch in Chrome. Adoption expectationFeature is considered a best practice for some use case within 12 months of reaching Web Platform baseline. Adoption planThis 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 discussionsIntent 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 <https://chromestatus.com/>. -- 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+unsubscr...@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.
