bug: ion-img can sometimes not load in on a lower-end CPU device due to Intersection Observer API behavior

[Jacob-McKay]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Sometimes (on a lower-end mobile device, or chrome browser with CPU throttling enabled), the ion-img will not display even when it is scrolled into view. This is because the Intersection Observer API may pass in multiple items to the callback where the code assumes only one item (where the last item is the current value stating the img is in the viewport).

Expected Behavior

If the ion-img has been supplied a src, and has been scrolled into view, I expect the image to load and be visible to the user.

Steps to Reproduce

Linked is an experiment you can run with CPU Throttling enabled in your code, it's kind of what my app is doing, it has a bunch of images hooked up to the Intersection Observer API and you will see logged to the console the times that there is more than one item in the callback.

Code Reproduction URL

https://codepen.io/Jacob-McKay/pen/LYympzR

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you provide some additional steps to reproduce the issue? I tried your CodePen on a low end device with CPU throttling enabled. I was able to get multiple entries per IO callback, but the first entry (index zero) was the entry that stated the img is in the viewport, so I was not able to reproduce the exact behavior you described.

[Jacob-McKay]

Great job catching that!. I had tunnel vision on the last entry being the one that is visible because in my app I was launching a modal with an image where I first noticed this (going from not visible to visible). Since my codepen is a different scrolling example the Intersection Observer sees the img appear then disappear before the slower main thread has a chance to get notified (that's where I assumed the batch of entries comes from). My fix is incomplete then because the image was visible but the current code would ignore that. Perhaps we should just listen for any entries that have a true isIntersecting, rather then caring about the order. lol maybe it's a feature not a bug that since the image zipped by so fast we avoided the cost of loading it :P

[liamdebeasi]

I am looking at this a bit more and I think your solution in #23704 is correct. The Intersection Observer entries go from oldest to newest, so the last entry should represent the latest state of the ion-img.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23704, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.