Bug 309921 – Safari - popover doesn't follow translated anchor

• Status: NEW
• Component: Layout and Rendering

[Alvaro Montoro]

Created attachment 478674 [details]
Screenshot of demo on various browsers

## Summary

When a popover is anchored to an element, its position should remain visually attached to that anchor. But if the anchor element is translated using CSS, the popover does not update its position accordingly in Safari, causing the visual relationship between the anchor and the popover to break.

## Expected Behavior

If an anchored element is translated (using `translate` or `transform`), the popover should follow the anchor's rendered position so that the two elements remain visually aligned.


## Actual Behavior

In Safari, the popover remains at the anchor's original layout position and does not follow the translated position of the anchor. This causes the popover to appear detached from its trigger.

Behavior on different browsers:

- Safari: The popover does not follow the translated anchor.
- Chrome: The popover correctly follows the translated anchor.
- Firefox: The popover does not follow the translated anchor.

(Screenshots attached comparing browser behavior.)


## Reproduction Code

Live demo on CodePen: https://codepen.io/alvaromontoro/pen/Kwgajxe

```html
<button id="button" popovertarget="menu">
  Popover Trigger
</button>
<div popover id="menu" anchor="button">
  Hello World
</div>
```

```css
#button {
  position: absolute;
  top: 50%;
  left: 50%;
  anchor-name: --button;
  translate: -50% -50%;
}

#menu {
  position-trigger: --button;
  top: anchor(bottom);
  left: anchor(left);
  position: fixed;
  margin: 0;
  padding: 0;
}
```

[Alvaro Montoro]

According to the CSS Anchor Positioning Module Level 1 specification (https://www.w3.org/TR/css-anchor-position-1/): 

> "The anchor box’s position and size is determined after layout. This position and size includes zoom and position-based adjustments (such as position: relative or position: sticky) as well as transforms (such as transform or offset-path)"

Since transforms are included when determining the anchor box geometry, the anchor functions (`anchor(bottom)` and `anchor(left)`) should use the transformed position of the anchor, and the popover should move with it when the translate is applied.

[Radar WebKit Bug Importer]

<rdar://problem/173033692>

[fantasai]

Following transforms was a recent change to the spec. It also says that it might be a few frames behind if you use transforms rather than positioning, so we should fix this to match the spec, but also for authoring it's better to use positioning than transforms if possible. (And the spec says as much.)

[fantasai]

You can center the button with { inset: 0; place-self: center; } btw.

[fantasai]

Spec change: https://github.com/w3c/csswg-drafts/issues/8584