I just wanted to post an update here. I’m getting help from sweetjs but the problem hasn’t been fixed yet. I managed to find a sort of workaround, but it has introduced a new issue!
I put the img element into a new div container, set the div position to relative, width 100%, bottom padding 75%, and then set the img itself to absolute. Luckily all my images are the same aspect ratio so this works responsively, and doing this has “forced” the images on page 2+ to load in at the correct size, finally! However as I mentioned earlier, this has caused a new issue.
The new issue:
For some reason, now when images load in (past page 1), they are loading in at a lower resolution. It’s not consistent though, one might be a “p-500” version of an image (the majority of cases) while another might be a “p-1080” version. Maybe something to do with the image file size? Similar to before, this is only happening on Safari (Mac and iOS) as well as Chrome for iOS. Chrome for Mac is fine. I’m unable to test on other browsers at the moment. This is also happening with both implementations I am trying, the “infinite scroll” as well as the “load more” approach. You can test out both versions from the links below:
Infinite scroll: https://www.darkmodedesign.com/home-5hfe-048fg-04nv-jdbe
Load more: https://www.darkmodedesign.com/home-5hfe-048fg-04nv-jdbe-copy
And here is my read-only project link again: https://preview.webflow.com/preview/darkmodedesign?utm_medium=preview_link&utm_source=designer&utm_content=darkmodedesign&preview=88d10c92a6c8d96a65461471b4ca1ed6&pageId=5eb3f6d8003377bbd4c51ec7