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: 2019-09-23 00:20 PDT (History)
5 users (show)

See Also:


Attachments

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!