Bug 137043

Summary: REGRESSION (iOS 8): Scrollbar can't be hidden when webkit-overflow-scrolling is set to touch
Product: WebKit Reporter: Chris Drackett <drackett>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Severity: Normal CC: alec.stanford.larson, alexander, benjamin, clamotte, ews-watchlist, hi, koivisto, othree, sereddos, simon.fraser, tomas, tristan, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: iPhone / iPad   
OS: Other   
Description Flags
Patch zalan: review+

Description Chris Drackett 2014-09-23 14:31:10 PDT
This seems to be a regression as it worked in iOS7. The following code used to create touch scrolling without showing a scrollbar:

  overflow-x: hidden
  overflow-y: hidden
  -webkit-overflow-scrolling: touch

  // hide the default scrollbar
    display: none

however, now the scrollbar is always shown, which on our screens is not visibly pleasing :)
Comment 1 Radar WebKit Bug Importer 2014-09-23 19:28:49 PDT
Comment 2 alec.stanford.larson 2017-06-05 10:55:39 PDT
I'm still seeing this in iOS10.

This seems like a very bad regression, and should be fixed immediately.

It's incredibly important to be able to hide horizontal scrollbars while keeping momentum scrolling. This makes the web application feel more native.

If you refuse to fix this, you're making Apple look complicit in making the web a lesser platform. While there are capitalist incentives in doing so, it's morally imperative to improve crucial deficiencies of the web platform. The accessibility of the web will always beat the native platform, especially since the iOS platform is not the majority of smartphone users.

This is a friendly reminder that this bug is not acceptable. :)
Comment 3 Cyril Lamotte 2017-09-06 06:52:10 PDT
Custom scrollbar does not work with :webkit-overflow-scrolling: touch;

.init-natural-slider {
  -webkit-overflow-scrolling: touch;


.init-natural-slider::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 3px;


Did you plan to fix this ?
Comment 4 Aleksey Sereda 2018-07-09 06:36:26 PDT
This problem is still not solved, it is a pity that it does not pay attention for so much time
please correct this
Comment 5 Tomas Brambora 2018-10-08 22:41:44 PDT
We've just hit this too - we have a left scrollable nav column where the selected highlighted item gets brighter background colour to match the right column (so they "blend" together). This bug causes a gap between the nav and the right column because the scrollbar background can't be styled.

Are there any plans to fix this please?
Comment 6 Alex 2019-03-21 01:05:27 PDT
Soon we will hit 5 years with this regression issue. Guys at Apple, please have a look, it really is a big deal for custom UI and hybrid mobile-web apps.
Comment 7 Simon Fraser (smfr) 2019-03-23 12:08:46 PDT
Created attachment 365816 [details]
Comment 8 EWS Watchlist 2019-03-23 12:10:27 PDT
Attachment 365816 [details] did not pass style-queue:

ERROR: Source/WebCore/page/scrolling/ScrollingTreeScrollingNode.h:68:  Inline functions should not be in classes annotated with WEBCORE_EXPORT. Remove the macro from the class and apply it to each appropriate method, or move the inline function definition out-of-line.  [build/webcore_export] [4]
ERROR: Source/WebCore/page/scrolling/ScrollingTreeScrollingNode.h:69:  Inline functions should not be in classes annotated with WEBCORE_EXPORT. Remove the macro from the class and apply it to each appropriate method, or move the inline function definition out-of-line.  [build/webcore_export] [4]
Total errors found: 2 in 16 files

If any of these errors are false positives, please file a bug against check-webkit-style.
Comment 9 Simon Fraser (smfr) 2019-03-23 17:16:02 PDT
Comment 10 hi 2019-09-06 19:29:29 PDT
This is still not working for me in the latest iOS safari. Will this ever be fixed?
Comment 11 Simon Fraser (smfr) 2019-09-06 22:21:41 PDT
::-webkit-scrollbar { display: none; } doesn't work for you?
Comment 12 hi 2019-09-06 22:25:18 PDT
(In reply to Simon Fraser (smfr) from comment #11)
> ::-webkit-scrollbar { display: none; } doesn't work for you?

Nope, it works if -webkit-overflow-scrolling: touch is removed from the element, but as soon as -webkit-overflow-scrolling: touch is added to the div the scrollbar reappears.
Comment 13 Simon Fraser (smfr) 2019-09-09 11:13:56 PDT
Please open a new bug with a test case.
Comment 14 Simon Fraser (smfr) 2019-09-09 14:14:11 PDT
Oh, this is fixed in iOS 13, which you're probably not testing yet.
Comment 15 hi 2019-09-09 19:20:35 PDT
Ahh, sorry for the confusion Simon. I made a test case here: https://codepen.io/frmrstnmnts/pen/dybmOdj

I'll wait until ios 13 officially ships and check again then. Thank you for your attention on this — it really is an important UI case.