CSS overflow-anchor: Browser Support, Values, Issues

What is CSS overflow-anchor?

CSS overflow-anchor is a CSS property defined in the W3C CSS Scroll Anchoring Module Level 1. It accepts the values auto and none. The auto value lets the browser anchor scroll position to a stable element when content shifts above it; none turns scroll anchoring off for that element.

Which browsers does CSS overflow-anchor support?

CSS overflow-anchor works in every major Chromium and Gecko browser. Chrome 56, Edge 79, Firefox 66, Opera 43, and Samsung Internet 5 enable it by default, while Safari on macOS and iOS, and Internet Explorer never received support.

What values does CSS overflow-anchor accept?

CSS overflow-anchor accepts two main keyword values, plus the standard CSS-wide global keywords. The two real values control whether the browser keeps the user's viewport anchored to a stable element when content shifts above it.

• auto: The default value. Lets the browser select the element as a potential scroll anchor and adjust the scroll position to keep that anchor in view when DOM mutations push other content down. Every scrollable element starts with overflow-anchor: auto.
• none: Opts the element out of scroll anchoring. The browser will not pick the element as an anchor, and content above it can push the viewport down freely. Use none on a chat list, an animation container, or any region where the script already manages scrollTop.
• inherit, initial, revert, revert-layer, unset: The standard CSS-wide keywords. They behave the same way they do on every other CSS property. Use them only when you need to reset or cascade the value explicitly inside a component.

The property is not inherited. Once a parent declares overflow-anchor: none, descendants cannot opt back in, because the CSS Scroll Anchoring spec disables anchoring on the scrolling container itself, not on the descendant.

Why do you need CSS overflow-anchor?

Scroll anchoring is on by default in every browser that supports it, and most pages benefit from that default. You reach for overflow-anchor only when the default fights your layout, your scripts, or your scroll listeners.

• Reverse infinite scroll, like chat apps: Apps that prepend new messages above the current view, such as Slack, Discord, and Telegram Web, can fight scroll anchoring because the browser auto-adjusts the scroll offset that the app is already managing manually. Setting overflow-anchor: none on the message list returns control to the script.
• Custom scroll-driven animations: Animations that read scrollTop on every frame can stutter when scroll anchoring quietly shifts the offset behind the script. Disabling overflow-anchor on the animated container keeps the offset stable so the animation reads the values it expects.
• Sticky element jitter: Elements pinned with position: sticky can jitter when scroll anchoring updates the offset mid-frame. Disabling overflow-anchor on the scroll container removes the conflict and stops the visible flicker.
• Layout shift debugging: When a page reports unexpected Cumulative Layout Shift, toggling overflow-anchor: none on the suspect container exposes the underlying layout shifts that scroll anchoring was hiding. The fix becomes far easier to land once the real cause is visible.
• Third-party widgets that misbehave: Ad iframes, embedded comment widgets, and lazy-loaded media can trigger scroll anchoring unpredictably. Scoping overflow-anchor: none to a wrapping container around the widget contains the side effect without turning anchoring off for the rest of the page.

What are the known issues with CSS overflow-anchor?

CSS overflow-anchor is widely supported on Chromium and Gecko, but the way different engines pick anchor nodes and handle suppression triggers still has edge cases that hit production sites. Plan around these before you rely on the property to fix a layout bug.

• No Safari support, on either macOS or iOS: Safari stable does not implement overflow-anchor. Pages that depend on overflow-anchor: none to control scroll position behave differently on Safari, and any layout that fights scroll anchoring on Chrome will not see the same fight on Safari at all. Test on Safari before assuming the property covers your iOS users.
• Suppression triggers cancel anchoring silently: The CSS Scroll Anchoring spec lists suppression triggers, including changes to top, left, right, bottom, margin, padding, width, height, transform, and position, that turn anchoring off on the scroll container. A CSS animation that touches any of those properties on the anchor's ancestor will quietly disable anchoring, which can read as a regression in another browser.
• No re-enabling under a disabled ancestor: Once a parent declares overflow-anchor: none, descendants cannot opt back in. A reusable component that wants scroll anchoring will lose it if any wrapper above it disables the property, so design system components should not depend on the default being active.
• Scroll event listeners need extra handling: When scroll anchoring shifts the offset, scroll event listeners fire with the new value. Listeners that compare scrollTop frame over frame can read the adjustment as user-driven scroll input, which causes false positives in analytics and in scroll-direction logic.

In my experience, the silent failure that bites teams the most is missing the difference between a Chromium fix and a Safari gap: an overflow-anchor: none rule that fixes a Chrome layout shift will not run on Safari at all, so the same page can behave correctly on Chromium and still ship the original bug on iOS. Always test the same pattern across Chrome, Firefox, and Safari Tech Preview before claiming the fix is browser-wide.

Citations

All CSS overflow-anchor version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Scroll Anchoring Module Level 1: w3.org/TR/css-scroll-anchoring-1
• MDN overflow-anchor CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
• MDN Scroll anchoring overview: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_anchoring/Overview
• Chromium Intent to Ship: Scroll Anchoring (Chrome 56): groups.google.com/a/chromium.org/g/blink-dev/c/VJmxBRYGVIE
• Mozilla Firefox 66 release notes: mozilla.org/en-US/firefox/66.0/releasenotes
• WebKit bug 171099, Implement scroll anchoring: bugs.webkit.org/show_bug.cgi?id=171099
• CSS Working Group editor's draft, Scroll Anchoring: drafts.csswg.org/css-scroll-anchoring-1
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support