[csswg-drafts] [cssom-view-1] Clip aligned element box by intermediate scrollers (#13411)

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

== [cssom-view-1] Clip aligned element box by intermediate scrollers ==
I discovered that we have an interop difference with scroll into view. Consider the following cases:

[Demo page](https://codepen.io/flackr/pen/xbOYVaP)
```html
<style>
.scroller { overflow: auto; position: relative; }
#A, #B { position: relative; }
#A { top: -400px; }
#B { top: -10000px; }
</style>
<!-- long scrollable content -->
<div class=scroller>
  <div id="A">partially in view</div>
  <div id="B">completely above scroller</div>
</div>
```

Scrolling to #A, Since [this patch in 2016](https://chromium.googlesource.com/chromium/src/+/29cea456ef3562dd7364e8e6e80aaddc0365a516), blink has clipped the rect we scroll into view to the portion that can be made visible in the inner scroller, and then scrolled the outer scroller to that clipped rect. gecko and webkit scroll to the original element bounds even though this aligns a portion of the element that can't be seen.

<img width="664" height="461" alt="Image" src="https://github.com/user-attachments/assets/7950f207-7815-4a9e-87b3-d09d27a8ec00" />

Scrolling to #B however still scrolls to the element's box.

I think chromium's behavior for #A is good, and I have landed similar related expectations in wpt for scroll margin: https://wpt.live/css/css-scroll-snap/scroll-margin-overflow-ancestor.html

I think for #B, we should probably also clip and align the top of the scroll container (top in this case because the element is above the top), i.e. the following:

<img width="738" height="461" alt="Image" src="https://github.com/user-attachments/assets/57a5c015-9e1a-4b33-a9be-e0d1576fb58a" />

TLDR; I propose we modify the [scroll a target into view algorithm](https://www.w3.org/TR/cssom-view-1/#scroll-a-target-into-view) when we finish scrolling in the inner scroller to clip the target element rect to the visible area in that scroller.

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


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

Received on Thursday, 29 January 2026 17:43:16 UTC