Summary: | Background image with background-attachment: local inside -webkit-overflow-scrolling: touch fails to display until viewport zoom | ||
---|---|---|---|
Product: | WebKit | Reporter: | Anton Andreasson <anton.andreasson> |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | NEW --- | ||
Severity: | Normal | CC: | bramus, jond, me, simon.fraser, webkit-bug-importer, zalan |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari 11 | ||
Hardware: | iPhone / iPad | ||
OS: | iOS 11 | ||
See Also: | https://bugs.webkit.org/show_bug.cgi?id=219324 |
Description
Anton Andreasson
2017-12-20 11:05:52 PST
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. 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. |