Image not loaded in random cases on Safari.

[EmilsK]

Hi,
I am experiencing an issue where is some random cases image is not loaded in Safari.
yall.js 3.1.1
Safari 12.1.1

Here's a quick screen recording of the issue:
https://drive.google.com/file/d/1X_tKFQF4373sqryXPo6gfT1i_gUna8C5/view

When I scroll back to that specific image which is not loaded it then gets loaded.
Also this is not happening for a specific image, but for a random image on every page refresh.

document.addEventListener("DOMContentLoaded", function () {
        yall({
            threshold: 1800
        });
 });

Is anyone having the same issue?

[nirav-programmer]

Hi,

yall.js 3.1.1 not working iOS safari < 12.1

any solution ?

[radfahrer]

We're seeing this in browsers other than Safari. It does seem to happen more often in Safari. After reading the MDN Docs I'm guessing that the images somehow get past the transition between not intersecting and intersecting without triggering the callback and then won't trigger the callback again until the image leaves the viewport. Which would explain why scrolling back over the image (usually) causes it to load.

[malchata]

My initial thoughts on this might be that the intersection listener callback code is detaching from certain objects before they load. I'm not sure how to approach this issue, though, and would appreciate a PR to address it, because I'm very short on time at the moment.

[malchata]

So, I've found that changing the check for entry.intersectionRatio to check instead for entry.isIntersecting seems to work better. Can you think of any reason why this would be, @radfahrer? Or if my assumption here is wrong?

[radfahrer]

Looks like isIntersecting does work more reliably. My working theory is that intersectionRatio can sometimes be 0.0 which would be falsey, and then the callback doesn't fire again for that element until it scrolls out and back into the scree.