What does overflow: overlay do?

overflow: overlay clips the content at the padding edge and paints scrollbars on top of the content instead of reserving layout space for them. The scrollbar floats over the box, so the visible content width does not change when the scrollbar appears.

Which browsers still support overflow: overlay?

Only legacy WebKit Safari from Safari 4 to 11.4 and Chromium browsers from Chrome 15 to 113 paint overlay scrollbars when overflow: overlay is set. Chrome 114+, Edge 114+, Opera 100+, and Samsung Internet 23+ alias it to overflow: auto.

What is the alternative to overflow: overlay?

The standard alternative is overflow: auto combined with scrollbar-gutter and scrollbar-width. scrollbar-gutter: stable reserves the gutter so the layout does not shift; scrollbar-width: thin shrinks the track. For full overlay-style scrollbars, use the WebKit pseudo-elements ::-webkit-scrollbar with a transparent track.

Was overflow: overlay ever a standard?

No. overflow: overlay shipped as a WebKit extension and Chromium picked it up for compatibility. The CSS Working Group considered it for inclusion but tracked the issue in csswg-drafts #6090 and resolved to drop it in favor of scrollbar-gutter and scrollbar-color.

Should I still use overflow: overlay?

No. Replace overflow: overlay with overflow: auto plus scrollbar-gutter: stable, since modern Chromium builds already alias overlay to auto. Existing rules that use overlay continue to parse, but new code should target the standard properties for predictable cross-browser behavior.

Home
/
Learning Hub
/
CSS Overflow Overlay: Browser Support, Alternatives

Testing

CSS Overflow Overlay: Browser Support, Alternatives

Q: Is overflow: overlay deprecated?

Yes. overflow: overlay was never adopted into a published CSS specification and the CSS Working Group removed it from CSS Overflow Module Level 4. Chrome 114 and Edge 114 alias it to overflow: auto, so it still parses but no longer paints scrollbars on top of the content.

Q: What is the difference between overflow: overlay and overflow: auto?

overflow: auto reserves gutter space for the scrollbar inside the box, so content reflows when the scrollbar appears. overflow: overlay paints the scrollbar on top of the content, so the content width stays fixed. Both clip overflow at the padding edge and both create a scroll container.

Q: Why is overflow: overlay not working in Chrome?

Chrome 114 and later parse overflow: overlay as overflow: auto. The property still applies, but the scrollbar takes up layout space instead of floating on the content. Migrate to scrollbar-gutter: stable with overflow: auto, or use ::-webkit-scrollbar to style an overlay-style scrollbar.

Q: Does Firefox support overflow: overlay?

No. Firefox has never supported overflow: overlay as a distinct value. Modern Firefox parses the keyword and computes it as overflow: auto, so the rule does not throw a syntax error but no overlay scrollbar is painted.

Q: Does Safari support overflow: overlay?

Safari 4 to 11.4 on macOS and iOS painted overlay scrollbars natively when overflow: overlay was set. Safari 12 and later still parse the keyword but rely on the platform overlay scrollbar setting in macOS, so the visual behavior depends on the user's mouse and trackpad preferences.

overflow: overlay worked in Chrome 15 to 113, Edge 79 to 113, Safari 4 to 11.4, and Opera 15 to 99. See the deprecation status and the modern alternatives.

Prince Dewani

May 1, 2026

On This Page

About Overlay
Browser Support
Deprecation Status
Overlay vs Auto
Alternatives
Fix in Chrome
Citations

CSS overflow: overlay is a legacy, non-standard value for the overflow shorthand that paints scrollbars on top of content instead of taking up layout space. It worked in Chrome 15 to 113, Edge 79 to 113, Opera 15 to 99, Samsung Internet 4 to 22, and Safari 4 to 11.4, while Chrome 114+, Edge 114+, Firefox, and Internet Explorer treat it as overflow: auto.

This guide covers what overflow: overlay is, the browsers that support it, the deprecation status, the difference from overflow: auto, the alternatives, and how to fix it in Chrome.

What is CSS overflow overlay?

CSS overflow: overlay is a non-standard value for the CSS overflow shorthand. It tells the browser to clip content at the padding edge and paint scrollbars on top of the content rather than reserve gutter space for them. The CSS Working Group never adopted overlay into a published specification, and modern Chromium browsers parse it as overflow: auto.

Which browsers does CSS overflow overlay support?

CSS overflow: overlay paints overlay scrollbars only on legacy WebKit and older Chromium builds. Every modern engine either aliases it to overflow: auto or has never supported it as a distinct value.

Loading browser compatibility data...

CSS overflow overlay compatibility in Chrome

Chrome supports overflow: overlay as a distinct value from Chrome 15 to 113 on Windows, macOS, Linux, ChromeOS, and Android. Chrome 94 added a console deprecation warning when the keyword was used. Chrome 114 aliased the value to overflow: auto, so the rule still parses but the scrollbar reserves layout space instead of floating on top of the content.

CSS overflow overlay compatibility in Edge

Microsoft Edge supports overflow: overlay from Edge 79 to 113 on Windows, macOS, and Linux on the Chromium engine. Edge 114 follows the upstream Chromium change and aliases overflow: overlay to overflow: auto. Legacy EdgeHTML 12 to 18 never supported overflow: overlay.

CSS overflow overlay compatibility in Firefox

Firefox has never supported overflow: overlay as a distinct value on Windows, macOS, Linux, or Android. Modern Firefox parses the keyword and computes it as overflow: auto, so the rule does not throw a syntax error, but no overlay scrollbar is painted on the box.

CSS overflow overlay compatibility in Safari

Safari supports overflow: overlay from Safari 4 to 11.4 on macOS and from Safari 4 to 11.4 on iOS. Safari 12 and later still parse the keyword but rely on the platform overlay scrollbar setting in macOS, so the visual result depends on the user's mouse and trackpad preferences. iOS Safari has used floating scrollbars by default since iOS 7, which makes overlay redundant on touch devices.

CSS overflow overlay compatibility in Opera

Opera supports overflow: overlay from Opera 15 to 99 on desktop on the Blink engine. Opera 100 follows Chromium 114 and aliases the value to overflow: auto. Opera Mobile picked up overlay support from Opera Mobile 14 and lost the distinct behavior on the same Chromium 114 base.

CSS overflow overlay compatibility in Samsung Internet

Samsung Internet supports overflow: overlay from Samsung Internet 4 to 22 on Galaxy phones and tablets. Samsung Internet 23, which is built on Chromium 114, aliases overlay to overflow: auto. Devices that have not yet rolled forward to Samsung Internet 23 continue to paint the legacy overlay scrollbar.

CSS overflow overlay compatibility in Android Browser

Chrome for Android supports overflow: overlay from Chrome 18 to Chrome 113, after which the value is aliased to overflow: auto on the same upstream schedule as desktop Chromium. The legacy Android Browser on KitKat and earlier did not paint overlay scrollbars and treated the keyword as an unknown value. Modern Android WebView follows the system Chrome version.

CSS overflow overlay compatibility in Internet Explorer

Internet Explorer 6 through 11 do not support overflow: overlay. The Trident engine treats the keyword as an unknown value and falls back to overflow: visible. Microsoft has retired Internet Explorer in favor of Edge, so users on Windows who want overlay-style scrollbars should switch to Microsoft Edge and rely on scrollbar-gutter.

Note: overflow: overlay behaves differently across legacy Chromium, Safari, and modern Edge builds. Test it on real browsers and OS with TestMu AI. Try TestMu AI free!

Is overflow: overlay deprecated?

Yes. overflow: overlay is deprecated in Chromium and was never part of any published CSS specification.

Chrome 94 console warning: Chrome 94 added a deprecation warning that fires in DevTools when overflow: overlay is parsed on a stylesheet, telling authors that the value will be removed.
Chrome 114 alias to auto: Chrome 114 collapsed overflow: overlay into overflow: auto. The property still parses cleanly, so existing pages do not break, but no overlay scrollbar is painted.
CSS Overflow Module status: The CSS Working Group debated overlay in csswg-drafts issue #6090 and resolved to leave it out of CSS Overflow Module Level 4. The standard direction is scrollbar-gutter and scrollbar-color.
Firefox compatibility: Firefox has always treated overlay as a synonym for auto, which means a fallback to overflow: auto already covers Firefox without any code change.
Safari compatibility: Safari still parses overlay, but the engine routes the scrollbar through the macOS platform setting rather than honoring the value as a distinct paint mode.

What is the difference between overflow: overlay and overflow: auto?

Both values clip content at the padding edge and create a scroll container. The split is about whether the scrollbar reserves layout space.

Dimension	overflow: overlay	overflow: auto
Standard status	Non-standard, removed from Chromium	Standardized in CSS Overflow Module Level 3
Scrollbar layout	Painted on top of content, no gutter reserved	Reserves gutter space inside the padding edge
Content reflow on overflow	Content width stays fixed when the scrollbar appears	Content width shrinks by the scrollbar width when overflow starts
Scrollbar visibility	Visible only while the user is scrolling on macOS, always on Chromium 113-	Visible whenever the content overflows the box
Browser support	Chrome 15 to 113, Safari 4 to 11.4, Opera 15 to 99, Samsung Internet 4 to 22	Chrome 4+, Edge 12+, Firefox 2+, Safari 3.1+, Opera 10+, Samsung Internet 4+, IE 6+
Recommended for new code	No, migrate to overflow: auto with scrollbar-gutter	Yes, the standard value for on-demand scrollbars

What are the alternatives to overflow: overlay?

The CSS Working Group routed the overlay use case into a set of standard scrollbar properties. Combine them on the scroll container to keep the layout stable and to thin the track without relying on the legacy keyword.

scrollbar-gutter: stable: Reserves the gutter even when the content does not overflow, so the page does not shift when the scrollbar appears. Works in Chrome 94+, Edge 94+, Firefox 97+, and Safari 18.2+.
scrollbar-width: thin: Shrinks the scrollbar to a thin track on the scroll container. Works in Chrome 121+, Edge 121+, Firefox 64+, and Safari 18.2+.
scrollbar-color: Sets the thumb and track colors with two color values. Works in Chrome 121+, Edge 121+, Firefox 64+, and Safari 18.2+.
::-webkit-scrollbar pseudo-elements: The WebKit scrollbar pseudo-elements give pixel-level control over the track and thumb on Chrome, Edge, Safari, Opera, and Samsung Internet. Set the track to transparent for an overlay-style look.
OverlayScrollbars JavaScript library: A maintained third-party library that paints custom overlay scrollbars consistently across every modern engine. Use it when CSS-only styling is not enough.
iOS Safari default behavior: iOS Safari already paints floating scrollbars on touch devices, so overflow: auto on iOS already gives the overlay look without any extra rule.

Why is overflow: overlay not working in Chrome?

overflow: overlay stopped painting overlay scrollbars in Chrome 114. The keyword still parses, but Chrome treats it as overflow: auto, so the scrollbar reserves layout space. Migrate to the standard scrollbar properties with these steps.

Open DevTools and confirm the version: Open chrome://version and check that the build is 114 or later. Chrome 113 and earlier still paint overlay scrollbars, so the migration only affects newer users.
Replace overlay with auto: In your stylesheet, change overflow: overlay to overflow: auto on every scroll container. The clip and scroll behavior stays the same; only the paint mode changes.
Add scrollbar-gutter for layout stability: Set scrollbar-gutter: stable on the same element so the gutter is reserved even when the content fits. The page no longer shifts when content height crosses the overflow threshold.
Thin the track with scrollbar-width: Add scrollbar-width: thin to keep the scrollbar visually compact. Pair with scrollbar-color to set the thumb and track colors so the rail looks closer to the legacy overlay style.
Style the WebKit scrollbar for full control: Add ::-webkit-scrollbar with width: 8px, ::-webkit-scrollbar-thumb with a semi-transparent fill, and ::-webkit-scrollbar-track with a transparent background. The track sits over the content and reads as an overlay scrollbar on Chrome, Edge, and Safari.
Verify on real devices: Open the page in Chrome 114+, Edge 114+, Firefox, and iOS Safari and confirm the scrollbar paints in the expected position. In my experience, the trip-up is forgetting that scrollbar-gutter only fires when the box is a scroll container, so the rule silently does nothing on overflow: visible boxes.

Citations

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

MDN overflow CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow
W3C CSS Overflow Module Level 3: w3.org/TR/css-overflow-3
W3C CSS Working Group, csswg-drafts issue #6090: github.com/w3c/csswg-drafts/issues/6090
Chromium blink-dev, Intent to Deprecate and Remove overflow: overlay: groups.google.com/a/chromium.org/g/blink-dev/c/vAcR9UdJwJw
MDN scrollbar-gutter CSS property: developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
MDN scrollbar-width CSS property: developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
MDN scrollbar-color CSS property: developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
MDN ::-webkit-scrollbar pseudo-element: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
WebKit blog, scrollbar APIs in Safari: webkit.org/blog/15269/news-from-wwdc24-webkit-features-in-safari-18-beta
Mozilla Firefox 97 release notes: mozilla.org/en-US/firefox/97.0/releasenotes
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

Author

Prince Dewani

Blogs: 8

Prince Dewani is a Community Contributor at TestMu AI, where he manages content strategies around software testing, QA, and test automation. He is certified in Selenium, Cypress, Playwright, Appium, Automation Testing, and KaneAI. Prince has also presented academic research at the international conference PBCON-01. He further specializes in on-page SEO, bridging marketing with core testing technologies. On LinkedIn, he is followed by 4,300+ QA engineers, developers, DevOps experts, tech leaders, and AI-focused practitioners in the global testing community.