Layout shift with picture tag where each source has a different aspect-ratio using own width and height value

[romaviolenta]

trafficstars

Describe the bug Trying to use responsive images with different aspect ratios (desktop/mobile), setting dimensions on source tags without using padding-top CSS hacks.

To Reproduce https://www.gelestatic.it/cless/common/test.html

Steps to reproduce the behavior: Mobile Viewport Chrome Mobile - fast 3g connection

What is the expected behavior: The browser should correctly calculate the aspect ratio from the width and height set on the source tag for both the first image (no lazyload) and the second (lazyload)

What happened instead: The first image is ok. The second image has a Layout Shift.

In what environment (browser/device etc.) does this bug happen/not happen: macOS Big Sur - Google Chrome Version 93

Keywords help others to find this issue: Core Web Vitals - Cumulative Layout Shift

⚠️ Search for existing open/closed issues/discussions before you report the issue. ⚠️ If you do not provide enough information to reproduce your bug. We won't be able to work on the issue. In most cases just providing a fraction of your code is not enough!

[Cedric-ruiu]

I see the same problem : CLS with lazysizes on picture tag. Waiting for fix the issue, I think the best practice is do not use lazy process on visible screen on load = no CLS.

[aFarkas]

First thank you for your bug report. I'm currently not very active on github... I don't fully understand your issue or what it has to do with lazysizes. As soon as you do not provide CSS to calc the dimensions of an image, you will get a layout shift. Because the browser will only calculate the height as soon as the images is downloaded. In case of lazy loaded image this might be more obvious because the load is delayed a little bit, but it is happening also with eagerly loaded images. The same thing would also happen if you would use the native lazy loading.

Due to the fact that you provide the aspect ratio for each image the browser would be capable of doing what you want, but no browser is currently doing that. Of course you can write a lazy sizes plugin that generates the needed CSS dynamically for you, but also in this case you would have a small CLS because this only happens as soon as JS kicks in and happens after the first paint. (A plugin that sort of does this is the following: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/aspectratio. I'm not really a fan but did you try?)

If you want to create plugin, I'm happy to help with the approach and to make it performant, but I won't write it myself ;-).