Select2 produces rough scrolling on mobile

Question

I'm testing the Select2 jQuery component on an iPhone, and all I did was open their demo website:

https://select2.org/getting-started/basic-usage

If you test their State example on a phone, scrolling doesn't respond to pressure and doesn't fade smoothly. It's a rough line scroll. When you move your thumb, the lines don't fade in and out.

On the other hand, on a desktop the scrolling/fading works great. It responds gracefully to mouse-wheel scrolls.

Just wondering has anyone noticed this?

EDIT Looks like iOS (unlike Android) requires

<div style="-webkit-overflow-scrolling: touch;">

for smooth scrolling of DIVs: https://weblog.west-wind.com/posts/2013/Jun/01/Smoothing-out-div-scrolling-in-Mobile-WebKit-Browsers

Answer 1

Reading your answer, it is not very clear how to add the -webkit-overflow-scrolling: touch; property to the select2 element, so I've decided to give a more detailed answer:

Details:

According to specs (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling), the -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

A touch value means that the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen.

However, this property applies only for iOS devices. Android works well even without it.

Usage:

We must append this property to the dropdown element that holds the suggestions - .select2-results__options.

Add the following code after the select2 css styles:

.select2-results__options {
    -webkit-overflow-scrolling: touch;
}

Demo:

https://codepen.io/andreivictor/pen/NYvvXP

(the following demo contains two select2 instances for a better comparison of the scroll effects)

Tested on:

• iPhone 6 Plus (iOS 10.3.2)
• iPhone 8 (iOS 11.2.5)
• iPad Mini 3 (iOS 10.3.2)