-webkit-overflow-scrolling: Support, Values, Alternatives

What is -webkit-overflow-scrolling?

-webkit-overflow-scrolling is a CSS extension that the WebKit team added to control whether a scrollable element uses momentum-based scrolling on a touch device. It accepts two values, auto and touch, and shipped only on iOS Safari, Samsung Internet, and the Chromium-based Android WebView.

Which browsers does -webkit-overflow-scrolling support?

Only iOS Safari, Samsung Internet, and the Android WebView ever shipped -webkit-overflow-scrolling. Every desktop browser ignored it, and modern iOS Safari has removed the effect.

What are the values of -webkit-overflow-scrolling?

-webkit-overflow-scrolling accepts two values, auto and touch. Each one tells mobile WebKit how to handle the scroll after the user lifts their finger.

• auto: The default. The scroll stops the moment the user lifts their finger. There is no glide, no overshoot, and no rubber-band bounce. Most pages never need to set this value explicitly.
• touch: Turns on momentum-based scrolling. The content keeps gliding for a short distance after the touch ends, the way native iOS lists scroll. The value also creates a new stacking context, which can change how positioned children paint inside the scroller.

The snippet below shows the legacy iOS pattern, an explicit auto opt-out, and the modern overscroll-behavior replacement. Paste it into a stylesheet and the rules take effect on the next paint.

/* Legacy iOS pattern: turn on momentum scrolling on a vertical list. */
.scroll-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Disable momentum scrolling on a panel. The scroll stops the moment the finger lifts. */
.no-momentum {
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* Modern replacement: native momentum plus a clean overscroll boundary. */
.feed {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

-webkit-overflow-scrolling is non-inherited, has no shorthand, and has no animation type. Setting touch on a child of overflow:hidden has no effect, since the child is not a scrollable element to begin with.

Is -webkit-overflow-scrolling deprecated?

Yes. -webkit-overflow-scrolling is deprecated and the effect is gone from modern WebKit. Apple removed the implementation in Safari on iOS 13 and later, and the Safari 13 release notes describe the change directly.

• Removed in iOS 13: WebKit added one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch. The property still parses, so CSS.supports() returns true, but it has no visible effect.
• Never standardized: The property has no W3C, WHATWG, or CSS Working Group draft. There is no unprefixed overflow-scrolling property planned, so feature detection cannot rely on a future stable name.
• No replacement on the same property: Apple did not add a successor with the same name. Native momentum scrolling is on by default in modern Safari, and the standard overscroll-behavior property covers the bounce and chaining cases.
• Lint rules flag it: Stylelint and the Chrome DevTools Issues panel mark -webkit-overflow-scrolling as a non-standard rule. Build pipelines that strip vendor prefixes will drop it from the production bundle.

What are the alternatives to -webkit-overflow-scrolling?

Drop the property and lean on the browser. Modern Safari, Chrome, Firefox, and Edge paint momentum scrolling on overflow:auto and overflow:scroll without any opt-in. For finer control over the scroll edge, use standard CSS that every modern engine supports.

• Native momentum scrolling: Set overflow-y: auto or overflow-y: scroll on the container and the browser handles the glide for you. This is the default on Safari from iOS 13 on, every modern Chromium, and every Firefox build.
• overscroll-behavior: The standard CSS property that controls scroll chaining and the rubber-band bounce. Set overscroll-behavior-y: contain to stop the parent from scrolling when the child reaches its edge, or overscroll-behavior: none to remove the bounce on iOS Safari.
• scroll-behavior: smooth: Pairs well with anchor jumps and scrollIntoView calls. It controls programmatic scrolling, not finger drags, but it gives you a smoother feel without a JavaScript animation.
• scroll-snap-type: Snaps the scroll to a grid of children. It is the standard, GPU-accelerated way to build a swipe-through carousel, and it removes the need to wrap a custom JavaScript scroller around a -webkit-overflow-scrolling: touch element.

What are the known issues with -webkit-overflow-scrolling?

-webkit-overflow-scrolling has the smallest cross-browser footprint of any CSS scroll control. The painful edge cases land on iOS Safari, fixed positioning, and the new stacking context the touch value creates.

• Stacking context surprises: Setting -webkit-overflow-scrolling: touch creates a new stacking context. Positioned children with z-index that worked outside the scroller can repaint above or below the wrong layer. The fix is to drop the property or set isolation: isolate explicitly so the new context is intentional.
• Fixed positioning bugs: Children with position: fixed inside a -webkit-overflow-scrolling: touch element scroll with the content on iOS Safari instead of staying pinned. WebKit Bug 153852 tracks the behavior. The workaround is to lift the fixed element out of the scroller and into a sibling.
• Form input cursor jumps: Tapping into a text input inside a momentum scroller on iOS 11 and earlier scrolls the input out of view before the keyboard opens, and the caret can land in the wrong row. Use a sentinel scroll listener or remove the touch value on the parent.
• White flicker on overflow change: Toggling overflow on a touch scroller in JavaScript can flash a one-frame white rectangle on iOS Safari. The cause is the GPU layer being torn down and rebuilt; the fix is to keep overflow constant and toggle a CSS class instead.
• iOS 13 removal silently breaks fallbacks: A site that relies on -webkit-overflow-scrolling: touch to enable momentum will look fine, since modern iOS scrolls natively, but a manual overflow toggle that flips between auto and touch becomes a no-op. Audit any JavaScript that writes the property at runtime and drop it.
• No effect inside sandboxed iframes: A page in an iframe with the sandbox attribute and no allow-scripts token cannot opt into the touch value at runtime. Set the property in the static stylesheet so it applies before the sandbox lock kicks in.

In my experience, the cleanest cross-browser pattern is to remove -webkit-overflow-scrolling entirely from new stylesheets and pair overflow: auto with overscroll-behavior: contain. Modern iOS Safari paints momentum natively, every Chromium and Firefox build does too, and the bounce control lands on a standard property that a linter will not flag.

Citations

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

• MDN Web Docs, WebKit CSS extensions: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_extensions
• MDN Web Docs, overscroll-behavior: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior
• MDN Web Docs, overflow: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow
• MDN Web Docs, scroll-behavior: developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
• MDN Web Docs, CSS scroll snap: developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
• WHATWG CSS Overscroll Behavior Module: w3.org/TR/css-overscroll-1
• Apple Developer, Safari CSS Reference: developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
• Apple Developer, Safari 13 Release Notes: developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
• WebKit Bugzilla 153852, position:fixed inside a -webkit-overflow-scrolling element: bugs.webkit.org/show_bug.cgi?id=153852
• MDN browser-compat-data PR 10542, -webkit-overflow-scrolling no longer supported in iOS 13+: github.com/mdn/browser-compat-data/pull/10542
• Wikipedia, WebKit: en.wikipedia.org/wiki/WebKit