Skip to content

[css-position] overlay property UA sheet is not enough. #11194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
emilio opened this issue Nov 13, 2024 · 6 comments
Open

[css-position] overlay property UA sheet is not enough. #11194

emilio opened this issue Nov 13, 2024 · 6 comments
Labels
css-position-4

Comments

@emilio
Copy link
Collaborator

emilio commented Nov 13, 2024 •
edited
Loading

The UA sheet approach in here means that authors can control top layer rendering in pseudo-elements, see:

<!doctype html>
<style>
  div::before {
    content: "";
    overlay: auto;
    position: absolute;
    inset: 0;
    background: red;
  }
</style>
<div></div>
<script>
  alert(getComputedStyle(document.querySelector("div"), "::before").overlay);
</script>

Which alerts auto in Chrome.

I believe this is non-intentional.

cc @tabatkins @flackr @lilles
@lilles
Copy link
Member

lilles commented Nov 14, 2024

Yes, that's not intentional.

@cjpearson
Copy link
Contributor

Could one approach be to say overlay computes to none for any pseudo-element other than ::backdrop?

@emilio
Copy link
Collaborator Author

emilio commented Nov 14, 2024

Possibly?

@Loirooriol
Copy link
Contributor

Kind of the same problem that I was trying to address in #4565. We resolved to add experimental work from #7346, which would allow

*, * :>> * { overlay: none !important }

@lilles
Copy link
Member

lilles commented Dec 13, 2024

Could one approach be to say overlay computes to none for any pseudo-element other than ::backdrop?

I noticed the Chrome implementation doesn't set overlay on the ::backdrop pseudos. Also, if I read the spec correctly, it seems like it should be possible to independently transition the overlay property of the backdrop, but I'm not sure. I assume the spec means overlay where it says content in https://drafts.csswg.org/css-position-4/#backdrop

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Dec 13, 2024
@lilles @chromium-wpt-export-bot
Enforce UA overlay:none !important for pseudo elements
96674f2 
See: w3c/csswg-drafts#11194

Change-Id: I7dcb5bf3f8455e9b59435c4eeb8791ffeb6860e5
Draft
@astearns astearns moved this to FTF agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this from FTF agenda items to Regular agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this to Regular agenda in CSSWG April 2025 meeting agenda Mar 27, 2025
@astearns astearns moved this from Regular agenda to Oldest unslotted in CSSWG April 2025 meeting agenda Mar 28, 2025
@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-position] overlay property UA sheet is not enough., and agreed to the following:

  • RESOLVED: UAs must apply 'overlay: none !important' to all pseudo-elements
The full IRC log of that discussion <fantasai> TabAtkins: I think for this issue we should resolve to "figure out how to fix this". But it absolutely was an unintentional allowance.
<fantasai> TabAtkins: overlay property, which allows things to leave top layer, is only settable on a few things
<fantasai> TabAtkins: by default, UA stylesheet has 'none !important'. Can only use in transition property, can't actually set the property
<fantasai> TabAtkins: But UA stylesheet only uses *
<fantasai> TabAtkins: which leaves out pseudos
<fantasai> TabAtkins: We don't have a way to generically refer to pseudo-elements
<oriol> q+
<fantasai> TabAtkins: So leave it open to figure out the solution, but we should resolve that this is unintentional and author's can't set it on pseudo-elements
<astearns> ack oriol
<fantasai> oriol: In another issue, 7346, we resolved to add some kind of ? to work on it
<fantasai> oriol: syntax that would allow using *:<<* and this would select all pseudo-elements that are originated and would selected all possible pseudo-elements
<TabAtkins> `:>>` being the "pseudo-tree combinator"
<fantasai> oriol: we could use it here
<oriol> *, * :>> * { overlay: none !important }
<fantasai> oriol: more work to do but it's something
<astearns> ack fantasai
<TabAtkins> fantasai: can we just resolve here that the ua stylesheet must apply this to * and to all pseudos? and let the ua figure out how to do it
<TabAtkins> astearns: we have in the past discussed whether it should be possible to express something in the UA stylesheet that cna't be expressed in author land, and decided that it's bad
<TabAtkins> fantasai: you can do it in author land, just list all pseudo-elements explicitly. we just shoudln't be maintaining that list.
<fantasai> astearns: proposed that overlay: none !important also applies to all pseudos
<fantasai> RESOLVED: UAs must apply 'overlay: none !important' to all pseudo-elements

@chromium-helper chromium-helper mentioned this issue Apr 1, 2025
Closed
@mozilla-apprentice mozilla-apprentice mentioned this issue Apr 1, 2025
Open
@astearns astearns moved this from Oldest unslotted to Tuesday Afternoon in CSSWG April 2025 meeting agenda Apr 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-position-4
Projects
CSSWG April 2025 meeting agenda
Status: Tuesday Afternoon
CSSWG January 2025 meeting
Status: Regular agenda items
Milestone
No milestone
Development

No branches or pull requests
5 participants
@lilles @emilio @cjpearson @Loirooriol @css-meeting-bot