NEW 295924
[css-anchor-1] anchor() fails to account for grid-area 
https://bugs.webkit.org/show_bug.cgi?id=295924
Summary [css-anchor-1] anchor() fails to account for grid-area
fantasai
Reported 2025-07-14 14:51:18 PDT
Our anchor() resolution fails to account for the effects of grid-area when the containing block is a grid, so boxes end up in the wrong place. See testcase: <!DOCTYPE html> <div style="display: grid; grid: 100px 100px / 100px 100px; border: solid; width: max-content; position: relative"> <div style="position: absolute; border: solid orange; margin: 1em; anchor-name: --foo"></div> <div style="position: absolute; top: anchor(--foo bottom); border: solid blue; grid-row: 2"></div> </div> https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E% 0A%3Cdiv%20style%3D%22display%3A%20grid%3B%20grid%3A%20100px%20100px%20%2F%20100px%20100px%3B%20border%3A%20solid%3B%20width%3A%20max-content%3B%20position%3A%20relative%22%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20border%3A%20solid%20orange%3B%20margin%3A%201em%3B%20anchor-name%3A%20--foo%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%20anchor(--foo%20bottom)%3B%20border%3A%20solid%20blue%3B%20grid-row%3A%202%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A This is probably related to the failure on https://wpt.live/css/css-anchor-position/position-try-grid-001.html as well.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-07-14 14:51:28 PDT
<rdar://problem/155823420>
fantasai
Comment 2 2025-07-14 15:41:45 PDT
Related: [css-anchor-position-1] anchor() fails to account for position-area https://bugs.webkit.org/show_bug.cgi?id=295936
Note You need to log in before you can comment on or make changes to this bug.