diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js index d0d90cd961a..4f94667c15f 100644 --- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js +++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js @@ -9,13 +9,19 @@ function forEachImage(post, callback) { }); } +function isLoaded(img) { + // In Safari, img.complete sometimes returns true even when the image is not loaded. + // naturalHeight seems to be a more reliable check + return !!img.naturalHeight; +} + export function nativeLazyLoading(api) { api.decorateCookedElement( (post) => forEachImage(post, (img) => { img.loading = "lazy"; if (img.dataset.smallUpload) { - if (!img.complete) { + if (!isLoaded(img)) { if (!img.onload) { img.onload = () => { img.style.removeProperty("background-image");