Sometimes wrong size is chosen on bgset

[simplenotezy]

Describe the bug Sometimes it chooses the wrong size for the bgset. See image:

In what environment (browser/device etc.) does this bug happen/not happen: Tested in latest version of Chrome on MacOS.

It only happen sometimes. The images is inside a Siema image slider, and is shown on conditions. Not sure if this has something to do with it.

[simplenotezy]

This is a work-around. Whenever a product is added, that is dynamic, I run this:

		setTimeout(() => {
			const images = document.querySelectorAll('.image-gallery .product-image');
			for (let i = 0; i < images.length; i++) {
				images[i].classList.add('lazyload');
			}
		}, 300);

That will force lazyload to trigger again.

I'd love if there was a more manual way to watch elements. The .init() way doesn't work, since you can't "uninit" / destroy, and it's not a direct API meant for this.

[simplenotezy]

Is there a lazySizes command I can run to recheck/reload elements within a container? Becauseit loads the wrong size :/, but if I do above function it reloads the correct size

[andrew-serrano]

We are experiencing a similar issue on one of our merchant's site as well. When testing this on a iPhone in Safari with a cleared browser cache it always displays the desktop version of the image, instead of the mobile version. Upon reloading the page the mobile version is displayed. This seems to only happen on mobile for us.

Below is a snippet of the HTML that is currently being rendered.

<div class="x-hero__image lazyloaded" role="img" aria-label="Hero Banner Full Image" data-bg="themes/levels/sfnt_build/images/hero_3-3.jpg" data-bgset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg [--small] |themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg [--medium] |themes/levels/sfnt_build/images/hero_3-3.jpg" style="background-image: url(&quot;themes/levels/sfnt_build/images/hero_3-3.jpg&quot;);"></div>
	<picture style="display: none;">
		<source data-srcset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg" media="(max-width: 640px)" srcset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg">
		<source data-srcset="themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg" media="(max-width: 959px)" srcset="themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg">
		<source data-srcset="themes/levels/sfnt_build/images/hero_3-3.jpg" srcset="themes/levels/sfnt_build/images/hero_3-3.jpg"><img alt="" class=" lazyloaded"
	</picture>
</div>