[csswg-drafts] [css-conditional-5] `scroll-state(stuck)` will remain applying its `@container` ruleset for elements has left viewport (#12302)

n0099 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional-5] `scroll-state(stuck)` will remain applying its `@container` ruleset for elements has left viewport ==
https://jsfiddle.net/ebkafjtp/12/
```html
<div class="container">
  <div class="sticky"></div>
  <div class="sticky"></div>
  <div class="sticky"></div>
  <div class="sticky"></div>
  <div class="sticky"></div>
</div>
```
```css
.sticky {
  container-type: scroll-state;
  position: sticky;
  top: 0;
  height: 30vh;
  margin-block: 2rem;
  background: gray;
}
.sticky:nth-child(even) {
  background: darkgray;
}

@container scroll-state(stuck: block-start) {
  *::before {
    content: 'block-start';
  }
}
@container scroll-state(stuck: none) {
  *::before {
    content: 'none';
  }
}
```
When scrolling the viewport to the end, any `.sticky` whose [`getBoundingClientRect().bottom`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) is negative will still have their `::before { content: 'block-start'; }` style that defined in the [`<block-contents>`](https://drafts.csswg.org/css-syntax-3/#typedef-block-contents) of [`@container`](https://drafts.csswg.org/css-conditional-5/#container-rule).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12302 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 7 June 2025 22:26:53 UTC