REGRESSION (iOS 8): Scrollbar can't be hidden when webkit-overflow-scrolling is set to touch

• Component: CSS
• Status: RESOLVED FIXED

[Chris Drackett]

This seems to be a regression as it worked in iOS7. The following code used to create touch scrolling without showing a scrollbar:

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

  // hide the default scrollbar
.scroll::-webkit-scrollbar
    display: none

however, now the scrollbar is always shown, which on our screens is not visibly pleasing :)

[Radar WebKit Bug Importer]

<rdar://problem/18435667>

[Alec Larson]

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. :)

[Cyril Lamotte]

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 ?

[Aleksey Sereda]

This problem is still not solved, it is a pity that it does not pay attention for so much time
please correct this

[Tomas Brambora]

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?

[Alex]

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.

[Simon Fraser (smfr)]

Created attachment 365816 [details]
Patch

[EWS Watchlist]

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.

[Simon Fraser (smfr)]

https://trac.webkit.org/changeset/243416/webkit

This is still not working for me in the latest iOS safari. Will this ever be fixed?

[Simon Fraser (smfr)]

::-webkit-scrollbar { display: none; } doesn't work for you?

(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.

[Simon Fraser (smfr)]

Please open a new bug with a test case.

[Simon Fraser (smfr)]

Oh, this is fixed in iOS 13, which you're probably not testing yet.

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.