[Webkit-unassigned] [Bug 181198] New: scroll-snap flickering when using lazy images

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=181198

            Bug ID: 181198
           Summary: scroll-snap flickering when using lazy images
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mic.gallego at gmail.com

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!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20171231/5995f69f/attachment-0001.html>