Poor scroll and draw performance when blur and lazyload is used
Reported by
radek.s...@gmail.com,
Oct 4
|
||||||||||||
Issue descriptionSteps to reproduce the problem: Please see attached file, unfortunately lazyload doesn't work on codepen (all images load at once), probably some issue with iframe and IntersectionObserver (maybe another issue?). 1. Create typical lazyload markup for images with fade-in effect. 2. Add some low quality image placeholders (LQIP) and apply blur to them. 3. See drawing and scrolling struggles when viewed on mobile. There was a similar issue regarding only blurred images and scrolling - https://bugs.chromium.org/p/chromium/issues/detail?id=398372. What is the expected behavior? Blurred LQIPs are drawn on load and full sized images are lazyloaded with fade in effect with no performance issues while scrolling. What went wrong? When only LQIPs (https://codepen.io/zipper/pen/pxyYOV) or only lazyload with fade in effect (https://codepen.io/zipper/pen/mzPgQx, but codepen does load all images at once, just remove css "filter" from attached html) are used, scrolling performance is normal. The page is also drawn "immediately" even when fast scrolling through page (blurred images are drawn). But when both is used, scrolling performance significantly drops and page is drawn during the scroll. This does affect only mobile Chrome, on desktop, there is no issue. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 69.0.3497.100 Channel: stable OS Version: 6.0.1 Flash Version:
,
Oct 5
,
Oct 5
radek.sery@: Please check the screencast and let us know if this the issue you are addressing? On scrolling observing images or not loaded fast. Tested this issue on 69.0.3497.100 using Pixel 2 XL. Thanks!
,
Oct 5
chelamcherla@: Yes, this is the addressed issue. Placeholder images are not drawn fast enough, even though they are loaded and even when scrolling back to already lazyloaded full-sized images. When blur filter is removed from CSS, everything works correctly. Thank you for video.
,
Oct 5
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 8
I played with the demo a little more and tried to duplicate Medium's solution. When the canvas is used for displaying the image (using quite naive and primitive piece of JS), the demo seems pretty smooth again. See attached file.
,
Oct 8
Tested the issue in Android and able to reproduce the issue. Steps Followed: 1. Opened attached html file and on scrolling lag of image load time is seen. Chrome versions tested: 60.0.3112.113, 71.0.3573.0 OS: Android 9.0.0 Android Devices: Pixel 2 XL Issue is seen in from older M-60 builds, hence considering this issue as Non-Regression and marking as Untriaged. Please navigate to below link for log's -- go/chrome-androidlogs/892164 Thanks!
,
Oct 11
,
Oct 30
Confirmed in 72.0.3595.0 - this looks like an image raster issue, scrolling itself is smooth.
,
Oct 30
Also, hosted repros: http://bokand.github.io/bugs/892164/lazyload.html With blur filter removed (from #5) - issue no longer repros: http://bokand.github.io/bugs/892164/lazyload-no-blur.html
,
Nov 2
I'll look at a trace here and see what there is to see. |
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by dtapu...@chromium.org
, Oct 4