Skip to content

Chrome has overflow issues with some position-area values #27573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
caugner merged 6 commits into from
Aug 14, 2025
Merged

Chrome has overflow issues with some position-area values #27573

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c43f705
position-area: Document Chrome issue
jakearchibald Aug 13, 2025
905aa57
Auto fixes
jakearchibald Aug 13, 2025
cee3cd3
It's only an issue in the single value cases
jakearchibald Aug 13, 2025
b7a6ec4
Mention workaround
jakearchibald Aug 13, 2025
bc0b40b
Merge branch 'main' into position-area-issues
caugner Aug 13, 2025
452945d
Adding clarity, and responding to feedback
jakearchibald Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 72 additions & 24 deletions css/properties/position-area.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `block-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -86,7 +88,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `block-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -121,7 +125,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `bottom` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -191,7 +197,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -226,7 +234,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `inline-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -261,7 +271,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `inline-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -296,7 +308,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `left` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -366,7 +380,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `right` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -398,7 +414,9 @@
"spec_url": "https://drafts.csswg.org/css-anchor-position/#valdef-position-area-self-block-end",
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-block-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -429,7 +447,9 @@
"spec_url": "https://drafts.csswg.org/css-anchor-position/#valdef-position-area-self-block-start",
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-block-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -463,7 +483,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -495,7 +517,9 @@
"spec_url": "https://drafts.csswg.org/css-anchor-position/#valdef-position-area-self-inline-end",
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-inline-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -526,7 +550,9 @@
"spec_url": "https://drafts.csswg.org/css-anchor-position/#valdef-position-area-self-inline-start",
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-inline-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -560,7 +586,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `self-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -595,7 +623,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "Using `span-all` unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1395,7 +1425,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `top` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1430,7 +1462,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `x-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1465,7 +1499,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `x-self-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1500,7 +1536,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `x-self-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1535,7 +1573,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `x-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1570,7 +1610,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `y-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1605,7 +1647,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `y-self-end` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1640,7 +1684,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `y-self-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down Expand Up @@ -1675,7 +1721,9 @@
],
"support": {
"chrome": {
"version_added": "129"
"version_added": "129",
"partial_implementation": true,
"notes": "When `y-start` is used as a single keyword, or alongside `span-all`, it unexpectedly allows the anchored box to overflow the viewport, obscuring content. Use `place-self: anchor-center` as a workaround. See [bug 438334710](https://crbug.com/438334710)."
},
"chrome_android": "mirror",
"edge": "mirror",
Expand Down