Re: [csswg-drafts] [css-anchor-position] Various bits of feedback (#12466)

On the question of safe vs unsafe- 

In Chromium, the inline axis seems to be implemented with `unsafe`, for instance `justify-self: unsafe anchor-center`. This means that content can overflow the containing block on both sides. It confusing also means that explicitly adding `justify-self: anchor-center` differs from the implicit `justify-self: anchor-center` specified as it opts into the "neither safe nor unsafe" behavior that shifts the content into the containing block on both sides.

Here's a demo showing just the inline behavior- https://codepen.io/jamessw/pen/YPyKLZP?editors=1100

When we look at both axes, it gets even more unclear- https://codepen.io/jamessw/pen/EajBPPY.

In Chromium, the block axis seems to be "neither safe nor unsafe".

<img width="313" height="364" alt="Image" src="https://github.com/user-attachments/assets/ccc6a851-c897-4d85-9e24-5bdda05d9781" />

In Safari, this is reversed — the inline axis is "neither safe nor unsafe" and the block axis is unsafe.

<img width="313" height="437" alt="Image" src="https://github.com/user-attachments/assets/1024915d-0c8e-4d33-b656-99de7f1359ff" />

Because this differs in an unexpected way between implementations, I think it should be explicitly defined in the spec.

I think that the implicit safety should be explicitly "neither safe nor unsafe", so that content is shifted to stay inside the containing block by default on both sides, and so it matches the behavior of specifying a keyword without safe or unsafe. People can still opt into `unsafe` when they do want it to overflow the containing block. 

-- 
GitHub Notification of comment by jamesnw
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12466#issuecomment-3052929371 using your GitHub account


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

Received on Wednesday, 9 July 2025 14:41:20 UTC