Bug 181048 - Background image with background-attachment: local inside -webkit-overflow-scrolling: touch fails to display until viewport zoom
Summary: Background image with background-attachment: local inside -webkit-overflow-sc...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-12-20 11:05 PST by Anton Andreasson
Modified: 2022-01-07 09:46 PST (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
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.