Bug 295322

Created attachment 475740 [details] Safari screenshot

Actually, it's seems there's more to this than in the reduced case. https://jakearchibald.com/2025/give-footnotes-the-boot/#:~:text=entirely%20without%20JavaScript, is a better example to look at (click the superscript 7).

<rdar://problem/154908754>

Hello, thanks for reporting this. Please note I'm doing this analysis on trunk-ish (297085@main), which is ahead of STP (STP 222 is up to 295967@main). I've attached a screenshot of the reduced repro running in 297085@main. About the reduced repro (https://codepen.io/jaffathecake/pen/ZYGNyzr?editors=1100) 1. What's the point with "justify-self: anchor-center;" on .footnote-popover-content? In Chrome, it doesn't do anything (removing it doesn't change the output). In Safari, it center-aligns the popover with the button, which seems to be expected behavior? 2. When removing "justify-self: anchor-center;", there's still a rendering difference between Chrome and Safari, but for a different reason. In Chrome, popovers have "overlay: auto". According to CSS Position 4, overlay:auto does the following: "Rather than generating boxes as part of its normal position in the document, it generates boxes as a sibling of the root element, rendered "above" it.". So the initial position of the popover (without "bottom: anchor(top)") is at the top-left corner of the viewport. Then "bottom: anchor(top);" aligns the popover to be above the button, and the margin helps line it up vertically with the button. In Safari, "overlay: auto" isn't implemented (see bug 276727), so the popover is initially positioned at the "normal" position (as if it's not a popover). So its initial position is to the right of the button. "bottom: anchor(top)" aligns the popover to be above the button, but then it'll be on the right of the button and not vertically lines up with the button. The CSS code used to position the box then makes assumptions about where the initial position of the popover is, which leads to the rendering difference. If you change the positioning code for .footnote-popover-content to be bottom: anchor(top); left: anchor(left); margin: 0 0 var(--arrow-size); then it renders identically in Chrome and Safari

Created attachment 475818 [details] Reduced repro screenshot in 297085@main

Created attachment 475819 [details] Video of issue > 1. What's the point with "justify-self: anchor-center;" on .footnote-popover-content? In Chrome, it doesn't do anything (removing it doesn't change the output). In Safari, it center-aligns the popover with the button, which seems to be expected behavior? From https://drafts.csswg.org/css-anchor-position-1/#anchor-center > When using anchor-center, by default if the anchor is too close to the edge of the box’s original containing block, it will “shift” from being purely centered, This is what you're seeing in Chrome. It avoids centring, since it would overflow the viewport. By allowing the box to overflow the viewport, Safari isn't following the spec. You can see that the Chrome/spec behaviour is desirable, as it means the content is readable. > In Chrome, popovers have "overlay: auto". According to CSS Position 4, overlay:auto does the following: "Rather than generating boxes as part of its normal position in the document, it generates boxes as a sibling of the root element, rendered "above" it.". What you're describing is "top layer" which Safari definitely supports, as it's a fundamental part of popover (and is used in other things like dialog, fullscreen, view transitions etc etc). Safari doesn't support the CSS property, but it definitely supports the behaviour. > …then it renders identically in Chrome and Safari But that isn't the rendering I'm aiming for. I've attached a video that hopefully explains the details better. I wasn't able to test trunk as it just kept telling me various component weren't signed so I wasn't allowed to run them. Is there a guide to getting this working? There was a readme in the package, but it seems out of date, as following the steps didn't work.

Hi Jake, thank you for replying. My initial reply was after a quick look at the bug, so there was some stuff that I was wrong about. As for the reduced demo (https://codepen.io/jaffathecake/pen/ZYGNyzr), this is about anchor-center not shifting as you said. This is tracked in bug 294575 and was fixed today. From further reducing the reduced case, I also found an issue where boxes in the top layer doesn't use the initial containing block as its static position (it should, per spec). This is tracked in bug 295686, but it's probably an accident that I found it and doesn't have anything to do with this bug. As for your site (https://jakearchibald.com/2025/give-footnotes-the-boot), the bug is because WebKit is clipping fixed-positioned anchor-positioned element to the viewport, which is wrong and is why the popover wasn't rendered. I have a fix in the works right now.

Created attachment 475875 [details] Reduced case Reduction of http://jakearchibald.com/2025/give-footnotes-the-boot/

Pull request: https://github.com/WebKit/WebKit/pull/47868

Thank you for taking another look at this. Great to see these fixes landing!

Committed 297297@main (6ea33a67c88a): <https://commits.webkit.org/297297@main> Reviewed commits have been landed. Closing PR #47868 and removing active labels.

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/53740