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
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-12-20 11:05 PST by Anton Andreasson
Modified: 2022-01-07 09:46 PST (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

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:
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.