Bug 181048

Summary: Background image with background-attachment: local inside -webkit-overflow-scrolling: touch fails to display until viewport zoom
Product: WebKit Reporter: Anton Andreasson <anton.andreasson>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bramus, jond, me, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: iPhone / iPad   
OS: iOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=219324

Description Anton Andreasson 2017-12-20 11:05:52 PST
Example url:

When horizontal scrolling in the "cropped" element there, the shadow to the right should disappear when you reach the end. Likewise, a shadow on the left side should appear as you start scrolling. This only works if pinching in and out. It also works as intended in the Firefox, the new version.
Comment 1 Simon Fraser (smfr) 2017-12-20 11:14:00 PST
What Safari version are you testing it? It works OK for me in Safari Tech Preview 45.
Comment 2 Anton Andreasson 2017-12-20 11:18:42 PST
I'm on iOS 11, maybe I forgot to say(?)
Comment 3 Simon Fraser (smfr) 2017-12-20 11:33:27 PST
Ah, I see. This is more about -webkit-overflow-scrolling: touch.
Comment 4 Radar WebKit Bug Importer 2017-12-20 11:34:06 PST
Comment 5 Anton Andreasson 2018-02-15 07:46:18 PST
Just wanted to add that the url above has changed. 

New url:
Comment 6 Jayden Seric 2019-09-23 00:20:44 PDT
I've discovered that updating a CSS variable on a -webkit-overflow-scrolling: touch element when it’s scrolled causes it to repaint correctly. I use React hooks, but here is a vanilla example:

if (CSS.supports('-webkit-overflow-scrolling: touch')) {
  const scroller = document.getElementById('scroller')
  scroller.addEventListener('scroll', () => {
    scroller.style.setProperty('--force-paint', Date.now())

This is a very inconvenient bug!
Comment 7 Bramus 2021-10-06 14:07:34 PDT
The workaround listed in #c6 no longer seems to work on iOS15.

Before iOS15, attaching a dummy animation to the scroller also worked (see https://brm.us/scroll-shadows#note-mobilesafari for details). This is no longer the case.
Comment 8 Simon Fraser (smfr) 2022-01-07 09:46:15 PST
Probably fixed by bug 219324.