Bug 181048 – Background image with background-attachment: local inside -webkit-overflow-scrolling: touch fails to display until viewport zoom

• Status: NEW
• Component: CSS

[Anton Andreasson]

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.

[Simon Fraser (smfr)]

What Safari version are you testing it? It works OK for me in Safari Tech Preview 45.

[Anton Andreasson]

I'm on iOS 11, maybe I forgot to say(?)

[Simon Fraser (smfr)]

Ah, I see. This is more about -webkit-overflow-scrolling: touch.

[Radar WebKit Bug Importer]

<rdar://problem/36160662>

[Anton Andreasson]

Just wanted to add that the url above has changed. 

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

[Jayden Seric]

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!

[Bramus]

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.

[Simon Fraser (smfr)]

Probably fixed by bug 219324.