[css-anchor-position] Positioned Element & Scrolling #12042
Description
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?