[csswg-drafts] [css-anchor-1] Clarify the expected behavior of anchor-center with scrollable containers (#13353)

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

== [css-anchor-1] Clarify the expected behavior of anchor-center with scrollable containers ==
When using `justify-self: anchor-center` when the anchor is within a scrollable container, I noticed different behaviors in each browser so I wanted to clarify.

[Demo](https://codepen.io/devongovett/pen/yyJgOBw) – scroll the anchor button into view and then click it to open the popover.

* Chrome - The popover is not attached the the anchor at all. Scrolling horizontally does not reposition the popover, it just scrolls with the same offset. If you scroll the page and then resize the window, it appears to jump to a new position.
* Firefox - Similar behavior to chrome, the popover is not attached to the anchor. Scrolling does not reposition. Resizing also does not reposition. It only re-positions if you close and re-open the popover.
* Safari - Does sort of what I'd expect. Popover is centered beneath the anchor regardless of the scroll position. It sometimes (?) repositions when the anchor scrolls out of view such that it "sticks" to the edge of the viewport. But it also flickers a lot when it does this and sometimes doesn't reposition at all. It also adjusts its position to stick to the edge when resizing the window.

The spec for [anchor-center](https://drafts.csswg.org/css-anchor-position-1/#anchor-center) is quite short and vague IMO.

> The [scrollable containing block](https://drafts.csswg.org/css-position-4/#scrollable-containing-block) is used in place of the [local containing block](https://drafts.csswg.org/css-position-4/#local-containing-block) where applicable, so that the entire [scrollable overflow area](https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region) (typically) is available for positioning.

* "where applicable" - when?
* "typically" - ??

> Note: When using [anchor-center](https://drafts.csswg.org/css-anchor-position-1/#valdef-justify-self-anchor-center), by default if the anchor is too close to the edge of the box’s [original containing block](https://drafts.csswg.org/css-position-3/#original-containing-block), it will “shift” from being purely centered, in order to remain within the original containing block.

This sounds like maybe what Safari implemented but again this is very light on detail (what is "too close"?).

Would be good to clarify this so that browsers implement it consistently.

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


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

Received on Thursday, 15 January 2026 01:08:29 UTC