Bug 301919 – [css-anchor-position-1] Chained positioned elements don't find the correct anchors

• Status: NEW
• Component: Layout and Rendering

[Roman Komarov]

Created attachment 477285 [details]
Saved HTML from the CodePen example

To reproduce: https://codepen.io/kizu/pen/JoGzMzW or see the attached copy of the test's HTML.

Expected: elements go in a “chain” one after another, anchoring to the last acceptable anchor. I remember this was decided in this issue: https://github.com/w3c/csswg-drafts/issues/8165

Both in Chrome and Firefox Nightly it is currently possible to anchor an absolutely positioned element to another absolutely positioned element if it is earlier in the flat tree. But in Safari (both stable and TP), it doesn't work correctly. In addition, when resizing the viewport vertically after the first time the page renders, the positioning of elements can adjust even though there is nothing that should cause it.

I noticed this issue in my old article's sidenotes layout example: https://kizu.dev/anchor-positioning-experiments/#sidenotes-layout

Eric Meyer also independently stumbled on this issue when testing in Safari for a similar use case: https://mastodon.social/@Meyerweb/115488981393573478

[Eric Meyer]

I discovered that changing this line in my testcase (https://codepen.io/meyerweb/pen/zxreeZE):

```
	top: max(anchor(var(--for) top), calc(anchor(--sidenote bottom) + 0.67em));
```

…to this, adding a fallback value to the `anchor()` function :

```
	top: max(anchor(var(--for) top), calc(anchor(--sidenote bottom, 0px) + 0.67em));

```

…resolved the unwanted layout behavior, though it does not do so in Roman’s testcase.  The layout in his testcase shifted a bit when the fallback was added, but still had the list items overlapping each other.  Crucially,  in my testcase the fallback value has to have a unit: setting it to unitless `0` did nothing to resolve the problem shown.

[Radar WebKit Bug Importer]

<rdar://problem/164468098>

[Roman Komarov]

Stumbled over another case: https://codepen.io/kizu/pen/NPNBBGd — when one of the anchors in the chain anchors to multiple anchors, the initial state is broken if there are many anchors. Removing some of the anchors from the `min()` there fixes the issue, but only partially — after resizing one of the inner elements, things break again.