301919 2025-11-04 02:41:05 -0800 [css-anchor-position-1] Chain of three or more anchor-positioned elements doesn't work 2026-03-25 19:26:42 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/58650 InRadar P2 Normal --- 291856 1 kizmarh kiet.ho arpit.agrawal2502 bfulgham eric fantasai.bugs kiet.ho maikelkrause simon.fraser webkit-bug-importer zalan oldest_to_newest 2156220 0 477285 kizmarh 2025-11-04 02:41:05 -0800 Created attachment 477285 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 2156271 1 eric 2025-11-04 06:15:17 -0800 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. 2157887 2 webkit-bug-importer 2025-11-11 02:42:11 -0800 <rdar://problem/164468098> 2162301 3 kizmarh 2025-12-01 13:54:01 -0800 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. 2185990 4 maikelkrause 2026-03-01 11:36:12 -0800 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. 2191216 5 arpit.agrawal2502 2026-03-17 19:55:17 -0700 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. 2191787 6 kiet.ho 2026-03-19 11:04:04 -0700 Pull request: https://github.com/WebKit/WebKit/pull/60946 2192112 7 kiet.ho 2026-03-20 10:58:37 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/58650 2192198 8 kiet.ho 2026-03-20 15:23:06 -0700 @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) 2192204 9 maikelkrause 2026-03-20 15:46:16 -0700 Thanks for looking into it Kiet Ho! I'll leave a comment on the other ticket also. 2193166 10 ews-feeder 2026-03-24 10:28:24 -0700 Committed 309845@main (28a802021ac6): <https://commits.webkit.org/309845@main> Reviewed commits have been landed. Closing PR #60946 and removing active labels. 2193716 11 ews-feeder 2026-03-25 19:26:42 -0700 Committed 305413.579@safari-7624-branch (7a468b09d94a): <https://commits.webkit.org/305413.579@safari-7624-branch> Reviewed commits have been landed. Closing PR #4821 and removing active labels. 477285 2025-11-04 02:41:05 -0800 2025-11-04 02:41:05 -0800 Saved HTML from the CodePen example Chain of anchored elements.html text/html 626 kizmarh PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiBkYXRhLWx0LWluc3RhbGxlZD0idHJ1ZSI+ PGhlYWQ+CjxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1s OyBjaGFyc2V0PVVURi04Ij4KICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgCiAgCiAgCgogIDx0 aXRsZT5DaGFpbiBvZiBhbmNob3JlZCBlbGVtZW50czwvdGl0bGU+CgogICAgPGxpbmsgcmVsPSJj YW5vbmljYWwiIGhyZWY9Imh0dHBzOi8vY29kZXBlbi5pby9raXp1L3Blbi9Kb0d6TXpXIj4KICAK ICAKICAKICAKPHN0eWxlPgoudGVzdCB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGFuY2hvci1u YW1lOiAtLXRlc3Q7CiAgdG9wOiBhbmNob3IoLS10ZXN0IGJvdHRvbSk7CgogIHBhZGRpbmc6IDFl bTsKICBtYXJnaW46IDFlbTsKICBib3JkZXI6IHNvbGlkOwp9Cjwvc3R5bGU+CgogIAogIAogIAo8 L2hlYWQ+Cgo8Ym9keT4KICA8b2w+CiAgPGxpIGNsYXNzPSJ0ZXN0Ij50ZXN0PC9saT4KICA8bGkg Y2xhc3M9InRlc3QiPnRlc3Q8L2xpPgogIDxsaSBjbGFzcz0idGVzdCI+dGVzdDwvbGk+CiAgPGxp IGNsYXNzPSJ0ZXN0Ij50ZXN0PC9saT4KPC9vbD4KICAKICAKICAKCgoKPC9ib2R5PjwvaHRtbD4=