1962905 - Product images not shown on multipick.com

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[Christian Holler (:decoder)]

On https://multipick.com/en/elite-minimum-pick-set/ the larger product pictures are no longer visible in Nightly. During load, they are visible for a brief amount of time and then they blank out. The smaller thumbnails on the left side are still visible.

Confirmed to work in Chrome.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

There is an is-loading class in the product gallery row which hides the images (if I add to chrome it behaves the same). So we should look into what removes that class in chrome.

Comment 2

[Alice0775 White]

I can reproduce the issue on Nightly139.0a1 Windows11.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Happens on WebKit as well fwiw.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Ok, so I see what's happening. The slider code is waiting for all the thumbnail images to be loaded, but they are not because there's one that's outside of the viewport with loading=lazy:

<img src="https://multipick.com/media/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde.webp" data-fallback="https://multipick.com/media/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde.jpeg?ts=1720798544" srcset="https://multipick.com/thumbnail/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde_1920.webp 1920w, https://multipick.com/thumbnail/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde_400.webp 400w, https://multipick.com/thumbnail/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde_800.webp 800w, https://multipick.com/thumbnail/8b/7e/a0/1720798544/2dba51045d540d183481c36151ac433833e6bfde_280.webp 280w" sizes="200px" class="weedesign-webp gallery-slider-thumbnails-image loading" loading="lazy">

They are in containers with overflow: hidden so we don't load it. I think chrome will load it because they have some slack (via scrollMargin) for lazy loading. So bug 1864794 would probably fix this site (because there's just one image that's barely outside of its container).

But if you add enough thumbnails then it'd break in Chrome as well, so it seems also kind of a website bug... If they want to block initialization on the thumbnails, they shouldn't make them use loading="lazy"...

Comment 5

[Emilio Cobos Álvarez [:emilio]]

I contacted them.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Reduced test-case that shows the behavior difference between browsers.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

This seems to work now.