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.
What Safari version are you testing it? It works OK for me in Safari Tech Preview 45.
I'm on iOS 11, maybe I forgot to say(?)
Ah, I see. This is more about -webkit-overflow-scrolling: touch.
<rdar://problem/36160662>
Just wanted to add that the url above has changed. New url: https://tickster.github.io/styleguide/components.html#cropped
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!
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.
Probably fixed by bug 219324.