overflow-anchorBaseline · Newly available
The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Sep 14, 2026.
Browser support
DesktopChrome
1–55Not supported
56+Supportedsince Jan 25, 2017
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–65Not supported
66+Supportedsince Mar 19, 2019
Current: 157Safari
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27MobileChrome Android
18–55Not supported
56+Supportedsince Feb 1, 2017
Current: 155Firefox Android
4–65Not supported
66+Supportedsince Mar 19, 2019
Current: 157Safari iOS
1–26.6Not supported
27+Supportedsince Sep 14, 2026
Current: 27How to use
Every current browser supports this, but it only became Baseline on Sep 14, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: overflow-anchor.
Feature detection
CSS · check before using
@supports (overflow-anchor: initial) {
/* styles that rely on overflow-anchor */
}
/* or in JavaScript */
if (CSS.supports("overflow-anchor", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (3). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| overflow-anchor | 56 | 79 | 66 | 27 | 56 | 66 | 27 |
| overflow-anchor.auto | 56 | 79 | 66 | 27 | 56 | 66 | 27 |
| overflow-anchor.none | 56 | 79 | 66 | 27 | 56 | 66 | 27 |