Images in lazyloading state won't show if going back in Safari iOS

[style4]

Describe the bug
When images have the class "lazyloading" and the visitor clicks a link and thus leaving the page and then going back in the browser, those images then won't show up. This is only happening in Safari on iOS.

To Reproduce
Use Safari on iPhone or iPad and visit https://resources.style4.se/lazysizes/products-index.php and quickly click on a product title/link and then go back. Those images that had the "lazyloading" state/class won't show up .The error is more likely to occur if the internet connection is slow (greater chance that images is in "lazyloading" state).

Se this video: https://vimeo.com/366055166/71ecf90afa

All the files in the above example can be downloaded here: https://resources.style4.se/lazysizes/lazysizes.zip . The differens between products-index.html and products-index.php is that the latter adds a timestamp to the images so one doesn't have to clear Safari browser cache between each try.

What is the expected behavior
That all images gets loaded

What happened instead
Images that were in lazyloading state won't show

In what environment (browser/device etc.) does this bug happen/not happen:
Safari on iPhone/iPad
Server protocol: Tried with both both h2 and http/1.1
Latest version of Lazysizes

[style4]

More info. When going back in the browser, the class for images that won't show is "lazyloading" and the src is the correct image path and not "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

[dexigner]

I have the same issue since I started using lazysizes (2+ years). It's both with Safari on iOS and macOS.

It doesn't have to be slow connection, if your images are large, and you navigate away while scrolling (before the 'loading' images could finish) and go back to the page, it ends up with broken image placeholders, and they don't ever finish loading.

[aFarkas]

I currently don't have the time to look into this. But I assume it is a Safari bug that has to do with the BFCache a (pretty ugly) workaround could be this: https://www.kimgunnarsson.se/back-forward-cache-invalidation-and-mobile-safari/

[aFarkas]

Ok can you try this as a better workaround:

window.addEventListener('pageshow', e => {
	if (e.persisted) {
		requestAnimationFrame(() => {
			document.querySelectorAll('.' + lazySizes.cfg.loadingClass).forEach( img => {
				if (img.complete) {
					lazySizes.loader.unveil(img);
				} 
			});
		});
	}
});

[aFarkas]

@style4
Thank you for your very helpful test case. I will add soon a bugfix based on the code above. Could you or @dexigner then verify that your issue are gone?

[dexigner]

The fix works great! Thank you!

[style4]

I sure can. It works great! I am very grateful that you solved it.

[boynet]

I wonder if it will make the performance worse on not bugged browsers,
it gonna reload all the images on back button?

[aFarkas]

@boynet
No if you read the code carfully it "reloads" all images that are complete and have a loading class. This is a situation that can't be true. Becaus loaded images will have the class loaded not the loading class. Hence it only unveils broken images.