oddbird / oddbird/css-anchor-positioning

[BUG] Non-HTML elements (SVG, MathML) can not be positioned

Open
#369 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
493
Forks
18
Avg merge
12h 37m
Merged PRs (30d)
5

Description

Describe the bug
Single value position-anchor that works in Chrome (in this case position-area: right;) is not working in Firefox at all with the polyfill.

To Reproduce
https://codepen.io/jsnkuhn/pen/NPNyxrx?editors=1100

Expected behavior
https://drafts.csswg.org/css-anchor-position-1/#position-area-syntax

  1. from my reading of the spec a single value position anchor like position-anchor: right; should be valid.
  2. It should compute to a 2 value syntax. In this case right span-all

while chrome accepts and renders this as expected. It doesn't seem to get the computed value correct. Currently computes to position-area: right; I don't know if i'm reading the spec wrong or if they just haven't gotten to this yet.

The polyfill is computing to right incorrectly but consistently with Chrome but this isn't rendering correctly with the polyfill.

Chrome 142:

Image

Firefox 145:

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the case in the linked CodePen in Firefox, then read the CSS Anchor Positioning implementation responsible for position-area parsing and layout. Compare single-value normalization with the CSSWG position-area syntax, and verify that the result renders as right span-all without breaking existing cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.