Bug 198858 – [Safari iOS 13] Scrollbar styling no longer works, can't control the position of scrollbars

• Status: NEW
• Component: Scrolling

[Liam DeBeasi]

With the introduction of iOS 13, one-finger accelerated scrolling on scrollable elements has been added as the default in Safari, removing the need to specify -webkit-overflow-scrolling: touch. However, this effectively prevents any scrollbar styling via CSS. 
On previous versions of Safari (iOS <= 12), scrollbar styling worked as long as -webkit-overflow-scrolling: touch was not set.

See example here: https://adamdbradley.github.io/mobile-ux-issues/scrollbars.html

In this example, -webkit-overflow-scrolling: touch is set on the "scrollable" element. Removing that value yields the following results:

On iOS <=12:
Removing -webkit-overflow-scrolling: touch shows the custom scrollbar styling.

On iOS 13:
Removing -webkit-overflow-scrolling: touch does not show the custom scrollbar styling, since accelerated scrolling is now the default.

Expected Results:
I would expect that there would be a way for developers to customize the scrollbar, regardless of accelerated scrolling status.

Actual results:
Scrollbar customizations via CSS are ignored on iOS 13.

[Radar WebKit Bug Importer]

<rdar://problem/51752992>

[Simon Fraser (smfr)]

We have no plans to bring custom scrollbar styling to async-scrollable overflow on iOS.

[Simon Fraser (smfr)]

The request here is to allow authors to control scrollbar insets (or allow insets on overflow:scroll) to provide a way to have the scrollbars show in the appropriate space, but have the scrolling content go behind top and bottom bars.

[Simon Fraser (smfr)]

We could maybe use the geometry of the ::-webkit-scrollbar-track to position the native scrollbar.

[longgt]

(In reply to Simon Fraser (smfr) from comment #2)
> We have no plans to bring custom scrollbar styling to async-scrollable
> overflow on iOS.

https://easttlehelp.vln.school.nz/studentwebsite/ios13-scrolling

By disabled -webkit-overflow-scrolling setting, we can get smooth on scroll but there's somewhere we need to notify readers there's something they need to scroll to view all of them. (The above URL is an example of showing scrollbar use case)

The best solution here is when developers were not specified styling of -webkit-overflow-scrolling, it will be 'touch' by default. But giving developers more chance to bring scrollbar back to readers by setting it to 'auto'.