Skip to content
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

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

Open
emilio opened this issue Nov 13, 2024 · 5 comments
Open

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

emilio opened this issue Nov 13, 2024 · 5 comments
Labels
Agenda+ 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ css-position-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lilles @emilio @cjpearson @Loirooriol