Problem
On a WordPress website an old problem popped up on iOS 10 devices. There is a wide gray line on the right side of the page next to the vertical scrollbar. It seems that the mobile safari wants to draw a full wide scrollbar while the iOS draws only a slim one. iOS wins with its native style scroll but the browser’s wide vertical scroll placeholder stays. How to get read of it ?
Solution
The content of a WordPress page is inside the body .page element and should get native style scroll only. There is a 5-6 years old solution from the iOS 5.0 era. Open your child theme’s css file (likely style.css) find and adjust .site or add a new entry like this:
Notes:
1. -webkit-overflow-scrolling is non-standard and were designed for momentum-based scrolling for the given element. It will not work for every user, probably you do not this line. Momentum-based scrolling: the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen.
2. You don’t need javascript or jQuery plugin to fake the native behavior on your WordPress site.
/* auto: when overflow is detected, scroll-bar is added; scroll: a scroll-bar is added. You may also use overflow-y or overflow-x */
overflow: auto;
/* scroll lazy, you may or may NOT need this line on a container div */
-webkit-overflow-scrolling: touch;
}