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:	CSS	Assignee:	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:
https://tickster.github.io/styleguide/#cropped

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

<rdar://problem/36160662>

Comment 5 Anton Andreasson 2018-02-15 07:46:18 PST

Just wanted to add that the url above has changed. 

New url:
https://tickster.github.io/styleguide/components.html#cropped

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.