[csswg-drafts] [css-anchor-position] Positioned Element & Scrolling (#12042)

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

== [css-anchor-position] Positioned Element & Scrolling ==
Given a testcase like this:

```
<!DOCTYPE html>
<style>
.abs-container {
  border: 1px solid;
  margin-top: 250px;
  position: relative;
  width: 1250px;
  height: 1250px;
}

#anchor {
  width: 150px;
  height: 50px;
  background: purple;
  anchor-name: --foo;
}

.scroller {
  border: 1px solid;
  max-height: 500px;
  max-width: 500px;
  overflow: scroll;
}

#query {
  width: 100px;
  height: 25px;
  background: pink;
  position: absolute;
  position-anchor: --foo;
  position-area: right center;
  position-visibility: always;
}

.filler {
  width: 1px;
  height: 750px;
}
</style>
Absolute Container here:
<div class="abs-container">
  Anchor element here:
  <div class="scroller">
    <div class="filler"></div>
    <div class="scroller">
      <div class="filler"></div>
      <div id="anchor">Anchor</div>
      <div class="filler"></div>
    </div>
    <div class="filler"></div>
  </div>
  Query element here:
  <div class="scroller">
    <div class="filler"></div>
    <div id="query">Positioned</div>
    <div class="filler"></div>
  </div>
</div>
<script>
anchor.scrollIntoView();
</script>
```

When the user scrolls whlie the mouse is over the query element, what scrolls? Chrome Canary Version 136.0.7095.0 (Official Build) canary (64-bit) seems to scroll the outermost scroller. This feels like a potential for accidental mis-scroll if the scroll happens to be over the positioned element.

Related - Should `query.scrollIntoView()` do anything special? Currently, it just scrolls to where the query element happens to be, not scrolling to make the anchor element visible, even when `position-visibility: anchors-visible` is set - It'd scroll to the right location, but the positioned element isn't visible anyway. I guess this behaviour is similar to scrolling to `visibility: hidden;` elements, but maybe more confusing?

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


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

Received on Wednesday, 2 April 2025 18:44:06 UTC