Bug 177646 - Scroll containers with "-webkit-overflow-scrolling: touch" don't always show scrollbars on scroll
Summary: Scroll containers with "-webkit-overflow-scrolling: touch" don't always show ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: iPhone / iPad iOS 10.3
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-09-29 04:02 PDT by Ben Frain
Modified: 2019-02-11 14:51 PST (History)
3 users (show)

See Also:


Attachments
Repro case: rapid changes to scrollable height (1.51 KB, text/html)
2019-02-11 14:51 PST, tahoon
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ben Frain 2017-09-29 04:02:47 PDT
This is iOS specific so view the following reduction on an iOS device:

https://codepen.io/benfrain/full/rGwWae

All of the horizontal panes are identical. However, only some of the scroll panes get the scroll handle when scrolled. If the problem doesn't occur first time, try refreshing and immediately scrolling some of the panes.

Live site example: https://mobile.bet365.com/#type=Splash;key=2;ip=0;lng=1 

Scroll down that page a little to the list of race times and scroll those. Again, some exhibit the scroll bar handle, some don't.
Comment 1 Radar WebKit Bug Importer 2017-10-02 07:00:02 PDT
<rdar://problem/34766358>
Comment 2 Simon Fraser (smfr) 2017-10-03 01:04:55 PDT
By "get the scroll handle" do you mean that they don't show scrollbars? Or that they don't handle the scroll (i.e. are not scrollable)?
Comment 3 Ben Frain 2017-10-03 01:35:56 PDT
I mean the scroll but the handle doesn't always appear when scrolled.
Comment 4 tahoon 2019-02-11 14:51:45 PST
Created attachment 361714 [details]
Repro case: rapid changes to scrollable height

This bug is timing-dependent. The symptom is that the user can swipe up and down to scroll an element; however, the scrollbar does not appear. Workaround is to change "-webkit-overflow-scrolling" to "auto" and then back to "touch" after a delay.

Attachment provides two ways to reproduce this bug in iOS.
The first way is reliable:
1. Check the "Add items automatically" checkbox. This adds items continuously to a scrollable area.
2. Flick finger up and down to scroll the list. Note that the scrollbar disappears (or does not appear in the first place).
3. Uncheck checkbox. This stops adding items.
4. Flick finger up and down. The list scrolls but there is no scrollbar.

The second way is to add items manually. It is more difficult to reproduce.
1. Click "Add item" button quickly 4 to 5 times.
2. Lightly and quickly flick finger up on the scrollable area.
3. Area scrolls but scrollbar does not appear.
4. If cannot reproduce, click "Clear all" and try again.

I have also managed to reproduce this bug with static HTML (no dynamic DOM modifications), but very rarely.