[csswg-drafts] [css-anchor-position-1] Should `anchor-center` use Scrollable Containing Block? (#12952)

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

== [css-anchor-position-1] Should `anchor-center` use Scrollable Containing Block? ==
Given #10861, `position-area` uses scrollable containing block for its overflow evaluation. `anchor()` does not (Using the local containing block), even on using the default anchor., This leads to a visible difference in fallback/visibility behaviour when anchoring to something out of the initial viewport, but the positions at least make sense.

`anchor-center` OTOH, gets placed at the edge of the local containing block, due to not using scrollable overflow area + alignment safety behaviour.

Demonstrative test case [here](https://github.com/user-attachments/files/22910307/overflow.html):

*  There are two pink anchors, one visible in the initial viewport at the top left of the scroller, another initially-not-visible one at the bottom right.
* 3 positioned elements all try to anchor to the bottom right element:
  * Blue one using `position-area`,
  * Purple one using `anchor()`,
  * Orange one using `anchor-center`
* All of them have a fallback to change the default anchor to the upper left anchor.

Two workarounds exist, but things seem to behave slightly differently on Blink and WebKit:

* Using `unsafe`:
  * Blink: The orange element anchors to whatever is visible at the moment
  * WebKit: The orange element anchors to the lower right anchor
* Using the `span-all` trick as described in #10861:
  * Blink: Unpredictable? Initially anchors to the upper left anchor - upon scrolling to lower right, it moves to the lower right anchor, but anchors in the lower right corner of the anchor, instead of its center. Upon scrolling back to upper left, it gets stuck in an intermediate position.
  * WebKit: The orange element anchors to the lower right anchor

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


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

Received on Tuesday, 14 October 2025 18:18:04 UTC