oddbird / oddbird/css-anchor-positioning
[BUG] Non-HTML elements (SVG, MathML) can not be positioned
Nobody has claimed this yet.
- 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
- from my reading of the spec a single value position anchor like
position-anchor: right;should be valid. - 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:
Firefox 145:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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