iOS WebView Scrolling Lag? Leverage -webkit-overflow-scrolling to Regain Native Smooth Scrolling
In iOS WebView development, many developers encounter the problem of unsmooth page scrolling — obvious stutters occur when scrolling up and down, and the page stops rolling immediately after the finger leaves the screen, completely lacking the "inertial scrolling" experience of native Apps. Although this seems like a small detail, it significantly reduces the interactive texture of the page.
I. Specific Manifestations of Unsmooth Scrolling
When you open a scrollable page in iOS WebView, two core issues arise:
- The scrolling process is jerky, without the smoothness of the native interface;
- Scrolling stops immediately after the finger leaves the screen, with no "momentum inertia" effect, leading to a disjointed interactive experience.
II. Core Cause of the Problem: Default Scrolling Property Value of iOS
Why does iOS WebView exhibit such a "counter-intuitive" behavior? The answer lies in Safari's private CSS property:
In iOS 5.0 and later versions, the WebKit kernel provides the **-webkit-overflow-scrolling** property, which specifically controls the scrolling style of elements with overflow:scroll. It has two values:
- auto (default value): Single-finger scrolling with no inertial effect — scrolling stops immediately after the finger leaves the screen, which is the direct cause of "scrolling stutters";
- touch: Enables iOS native-style scrolling — not only is the sliding smoother, but it also retains "momentum inertia" (the page continues to scroll for a distance after the finger leaves).
III. Solve in Two Steps: Retrieve the Smooth Scrolling Experience
For the scrolling issue of iOS WebView, we can resolve it through the following two solutions (combining them yields the best results):
Solution 1: Enable Native Scrolling Style (-webkit-overflow-scrolling: touch)
Directly add -webkit-overflow-scrolling: touch to the scrolling container, and optimize scrollbar display:
/* Enable native sliding for the scrolling container */
.scroll-wrapper {
overflow-y: auto;
/* Turn on scrolling first */
-webkit-overflow-scrolling: touch;
/* Enable iOS native inertial scrolling */
}
/* Hide the default scrollbar (optional, optimize visual effect) */
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
⚠️ Note:
After enabling touch, the element will create a stacking context, which may cause internal elements with position:fixed to scroll along with the page (instead of being fixed in the viewport). This needs to be avoided by adjusting the layout.
Solution 2: Adjust Overflow Hierarchy to Avoid Global Scrolling Conflicts
Reduce WebView's scrolling hierarchy conflicts through a layout of "hiding scrolling in the outer layer and independent scrolling in the inner layer":
/* Outer layer (body) hides scrolling to avoid global scrolling interference */
body {
overflow-y: hidden;
height: 100vh;
/* Fixed height to ensure overflow takes effect */
}
/* Inner container scrolls independently */
.scroll-wrapper {
height: 100vh;
overflow-y: auto;
}
Combined Solution (Recommended)
Combine the two solutions to enable native scrolling while avoiding layout conflicts:
/* Outer layout */
body {
overflow-y: hidden;
height: 100vh;
margin: 0;
}
/* Scrolling container: native sliding + independent scrolling */
.scroll-wrapper {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Hide scrollbar */
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
Through these two steps, the iOS WebView page can restore the same smooth sliding experience as native Apps, while avoiding common layout conflict issues.
