Bug 181198
| Summary: | scroll-snap flickering when using lazy images | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | mic.gallego |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | mjs, sabouhallawa, simon.fraser, smoley, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 11 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 11 | ||
mic.gallego
Hi,
When using scroll-snap in conjunction with lazy loading (in my case I'm using LazySizes), the images are flickering and the position settling is junky. Once all images have been loaded (or when an src is explicitly given) the problem does not occur. It does not occur neither on the OS X implementation.
I've set up a demo here: http://jsbin.com/kabijewule/edit?html,css,output
You can see by scrolling that when reaching a new slide, another image goes "over" the current tile. I've take care to use fixed width tile, and also using the padding-bottom to allocate the image space to avoid layout trashing, but the issue is still perceptible.
In the mean time I had to simply remove scroll snapping and use free scroll, which solves the issue.
Thanks!
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/67153694>
Smoley
I have not been able to reproduce this using the provided test case. Does this still reproduce for you on the latest iOS build?