1838746 - (css-anchor-position-1) [META] [css-anchor-position-1] Implement CSS Anchor Positioning

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Daniel Holbert [:dholbert]]

This bug tracks implementation of CSS Anchor Positioning Level 1.

Spec link: https://drafts.csswg.org/css-anchor-position-1/

Comment 1

[Daniel Holbert [:dholbert]]

xiaochengh has an explainer at https://xiaochengh.github.io/Explainers/css-anchor-position/explainer.html , FWIW.

Standards-position issue: https://github.com/mozilla/standards-positions/issues/794

Comment 3

[Jonathan Watt [:jwatt]]

Intent to Prototype e-mail:
https://groups.google.com/a/mozilla.org/g/dev-platform/c/4cbytMKbHtg

Comment 4

[Christophe Coevoet]

I see that this meta bug depends on a ticket about adding basic support in block layout, explicit excluding support in other layouts like flex and grid.
What is the plan for those other layouts ? Will the feature ship without support for them ? If yes, this will make feature detection harder in case the relevant support is for anchor positioning in a grid layout.

Comment 5

[Jonathan Watt [:jwatt]]

Those separations are just to provide some stepping stones to break up the implementation work into digestable parts. There's no intention to release those parts separately, and usable feature detection is something we'll very much be keeping in mind. If/when we get to the point that we're going to release something that will be noted here, whether or not it's a "complete" or partial release.

Comment 6

[Albert Marashi]

I noticed the spec specifically mentioned that transform and other post-layout effects will not affect the position of the anchors. Is there any plans to address this?

Comment 7

[Roman Komarov]

I noticed the spec specifically mentioned that transform and other post-layout effects will not affect the position of the anchors. Is there any plans to address this?

See this CSSWG issue: https://github.com/w3c/csswg-drafts/issues/8584 — if you have any specific use cases you're thinking about, please, comment in the issue, it will help with moving it forward!

Comment 8

[Brandon McConnell]

Now that CSS Anchor Positioning Level 1 & Level 2 are both released (both technically in draft), could Firefox be one of the first to implement both specs.

• https://drafts.csswg.org/css-anchor-position-1/
• https://drafts.csswg.org/css-anchor-position-2/

Especially if this is an active effort, supporting both here would be a very big win for interoperability and for Firefox.

Comment 9

[xPaw]

I gave css anchors a quick test in Firefox, and they are not positioned correctly.

Example url: https://steamdb.info/app/730/history/

Hover icons or buttons in the top right half, or hover the dates in history.

Comment 10

[rickdoesburg]

(In reply to xPaw from comment #9)

I gave css anchors a quick test in Firefox, and they are not positioned correctly.

Example url: https://steamdb.info/app/730/history/

Hover icons or buttons in the top right half, or hover the dates in history.

Same here, thought I was going crazy because my @supports rule does apply in Nightly. https://codepen.io/rickdoesburg/pen/XJdxYQM

Comment 11

[rickdoesburg]

(In reply to xPaw from comment #9)

I gave css anchors a quick test in Firefox, and they are not positioned correctly.

Example url: https://steamdb.info/app/730/history/

Hover icons or buttons in the top right half, or hover the dates in history.

Same here, thought I was going crazy because my @supports rule does apply in Nightly. https://codepen.io/rickdoesburg/pen/XJdxYQM

Comment 12

[[e-mail]]

I've written an article on how to anchor popovers to the button that triggered them, and found that it does not behave correctly at all in Firefox 147 beta 2: https://mariusgundersen.net/article/2025-anchored-popover/

Some things that are not behaving correctly:

• ::before and ::after are not inheriting the anchor target from their parent element
• anchored popovers don't follow the element they are anchored to on scroll
• anchored popovers are positioned all the way to the left when there isn't enough room to the right

Comment 13

[Daniel Veditz [:dveditz]]

from comment 12

Some things that are not behaving correctly:

This is a "META" bug, meaning it is for bookkeeping and tracking other work, not a place for discussions or specific issues. It is still open (not "FIXED") because the feature has not been completely implemented. Likely your problems are known and amongst the 60+ open "Depends on" bugs listed at the top of this issue, but if not you should file new bugs so they can be fixed.