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-sizing] Stop preventing pseudo-elements from having a last remembered size? #11434

Open
Loirooriol opened this issue Jan 3, 2025 · 0 comments
Open

[css-sizing] Stop preventing pseudo-elements from having a last remembered size? #11434

Loirooriol opened this issue Jan 3, 2025 · 0 comments
Labels
css-sizing-4

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css-sizing-4/#last-remembered

Only elements capable of being ResizeObserver targets can have a last remembered size.

AFAIK the point of this sentence was to exclude pseudo-elements, since in JS you can't use ResizeObserver to observe pseudo-elements.

The thing is, on both Blink and WebKit, Element is a superclass of PseudoElement, so pseudo-elements are perfectly capable of being ResizeObserver targets, it's just that an author doesn't have access to the PseudoElement.

So in fact, pseudo-elements can already have a last remembered size on Blink and WebKit.

On Gecko they can't, but Gecko doesn't even use ResizeObserver to track the last remembered size, so the restriction seems pointless anyways.

If pseudo-elements need to be excluded it might be because their lifetime is not completely clear, but that's a completely different topic. By itself, I don't think that not being possible ResizeObserver targets justifies not having a last remembered size.

<!DOCTYPE html>
<style>
div::before {
  content: "lorem ipsum";
  display: inline-block;
  border: solid cyan;
  contain-intrinsic-size: auto 0px;
}
div.skip-contents::before {
  content-visibility: hidden;
}
</style>
<div class="skip-contents"></div>
<script>
document.body.offsetLeft;
document.querySelector("div").className = "";
requestAnimationFrame(() => requestAnimationFrame(() => {
  document.querySelector("div").className = "skip-contents";
}));
</script>
Gecko Blink WebKit
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-sizing-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol