Bug 301919

Summary: [css-anchor-position-1] Chain of three or more anchor-positioned elements doesn't work
Product: WebKit Reporter: Roman Komarov <kizmarh>
Component: Layout and RenderingAssignee: Kiet Ho <kiet.ho>
Status: NEW    
Severity: Normal CC: arpit.agrawal2502, bfulgham, eric, fantasai.bugs, kiet.ho, maikelkrause, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/58650
Bug Depends on:    
Bug Blocks: 291856    
Attachments:
Description Flags
Saved HTML from the CodePen example none

Roman Komarov
Reported 2025-11-04 02:41:05 PST
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
Attachments
Saved HTML from the CodePen example (626 bytes, text/html)
2025-11-04 02:41 PST, Roman Komarov 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Eric Meyer
Comment 1 2025-11-04 06:15:17 PST
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
Comment 2 2025-11-11 02:42:11 PST
<rdar://problem/164468098>
Roman Komarov
Comment 3 2025-12-01 13:54:01 PST
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.
maikelkrause
Comment 4 2026-03-01 11:36:12 PST
I ran into the same thing while working on this demo which uses a chain with two separate anchors: https://codepen.io/maikelkrause/pen/yyaNQYg And a simplified test case (this one with just one anchor chain): https://codepen.io/maikelkrause/pen/raMOVNN Interestingly the result seems to be non-deterministic. I get the elements rendered in different sequences when I refresh the page a few times.
arpit.agrawal2502
Comment 5 2026-03-17 19:55:17 PDT
I also hit the same issue. Test case: https://codepen.io/editor/arpit-codes/pen/019cf6ad-f414-76e9-b490-f355482cac4b In the above pen, the first container shows that starting the chain with a static element also leads to the wrong behaviour.
Kiet Ho
Comment 6 2026-03-19 11:04:04 PDT
Pull request: https://github.com/WebKit/WebKit/pull/60946
Kiet Ho
Comment 7 2026-03-20 10:58:37 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58650
Kiet Ho
Comment 8 2026-03-20 15:23:06 PDT
@maikelkrause@gmail.com: This test case https://codepen.io/maikelkrause/pen/raMOVNN actually has two bugs: this (which will fix the green chain) and bug 310398 (which will fix the purple chain)
maikelkrause
Comment 9 2026-03-20 15:46:16 PDT
Thanks for looking into it Kiet Ho! I'll leave a comment on the other ticket also.
Note You need to log in before you can comment on or make changes to this bug.