Skip to content

[css-position-4] Consider removing the overlay property #13200

@josepharhar

Description

@josepharhar

Top layer exit animations can work without the need for the overlay property by keeping top layer elements with display animations in the top layer until the display animation finishes and the element gets a display:none style.

The overlay property is not very ergonomic for developers because every use case I've seen involves developers wishing to keep top layer elements in the top layer while they are doing their exit animation, but it is easy to forget adding the overlay property to the list of transitions. I have personally debugged countless demos which were fixed by adding the overlay property to the list of transitions.

The overlay property has not been implemented outside of chromium yet, and it can be removed from chromium without breaking existing top layer exit animations to display:none which already specify the overlay property.

A use case for top layer exit animations which this would break is animating a top layer element with an overlay transition to a display state which is not display:none, like making a popover animate from the top layer into an in-document flow. However, I don't believe this capability is being used on websites (especially due to lack of interop), and this use case should also be implementable with view transitions.

If a top layer element never animates to display:none, then I believe we can let it stay in the top layer "forever." However, we can keep this spec text for cases where UAs wish to forcefully remove elements from the top layer:

User agents may, at their discretion, remove a running transition on overlay. The conditions for this are intentionally undefined. (This is to prevent potential abuse scenarios where a transition: overlay 1e9s; or similar attempts to keep an element in the top layer permanently.)

@tabatkins @lilles @nt1m

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions