Bug 181198 - scroll-snap flickering when using lazy images
Summary: scroll-snap flickering when using lazy images
Status: RESOLVED CONFIGURATION CHANGED
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-31 01:11 PST by mic.gallego
Modified: 2020-08-18 13:41 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 mic.gallego 2017-12-31 01:11:15 PST
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!
Comment 1 Radar WebKit Bug Importer 2020-08-15 15:21:55 PDT
<rdar://problem/67153694>
Comment 2 Smoley 2020-08-18 13:41:46 PDT
I have not been able to reproduce this using the provided test case. Does this still reproduce for you on the latest iOS build?