Can anyone help me figure out why the images from page 2 onwards of my collection list are not currently loading in Safari?
I’ve tested the site in Chrome and the Sizzy app and it seems to work fine, but for some reason images have stoped loading after page 1 in Safari for OSX as well as iOS (have tested on my phone and my wife’s phone).
*Edit - I’ve had to temporarily remove the pagination and infinite scroll from the homepage for now until it can be fixed. However I have duplicated the page and the bug still occurs for anyone to check out: https://www.darkmodedesign.com/home-5hfe-048fg-04nv-jdbe
I’m guessing that the issue is with the custom code for the infinite scrolling, as when I refresh the page after scrolling down past “page 1” (for instance https://www.darkmodedesign.com/home-5hfe-048fg-04nv-jdbe?2bf851fe_page=2) the images load fine. It’s weird though, because I built the site last week and the infinite scrolling has been working fine up until today - not sure what I changed to cause the bug…
For starters don’t load jQuery twice. jQuery currently loaded by WF before the body close. Code that depends on it should be loaded after that. I would start there.
Hey Webdev. Interesting, the tutorial specifically mentioned putting the custom code in the head code. However even after moving it to before body it still didn’t fix the issue
Looking at the comments of the tutorial, I sounds like someone else ran into the exact same problem as me, although I’m not seeing the 0 opacity when I inspect my own code, but I’m not a coder so may be missing it.
However what I did notice is that for the items that are currently invisible, they seem to be loading in at a height of 0px instead of the proper dimensions, so I suspect that is something to do with it. I’ll keep tinkering with the item properties to see if I can fix this.
Further testing: If I explicitly set the height of the image to a pixel value the images on page 2+ load, but obviously at the set pixel value. Auto and 100% are not working. I’ve played around with the values for the image, container, collection list/item, etc but can’t find a way to “force” the images to load at their proper height and instead they are loading at 0px height.
In terms of devices and browsers I’m testing this on, the bug is currently appearing on Safari for Mac and iPhone, as well as Chrome for iPhone. However the site works perfectly on Chrome for Mac, as well as the site testing Mac app “Sizzly”.
jQuery is already loaded on your project by Webflow. Page → https://www.darkmodedesign.com/home-5hfe-048fg-04nv-jdbe. There is no need to load it twice. I may not “Fix” your issue but it certainly does not help with debugging. Clean this up and I may have a chance to look at this again after I address my rather long work queue.
I just tried a new tutorial, this time from finsweet.com and implementing a load more approach (on click) instead of infinite scroll, and the bug is still occurring!
Again, the bug is only occurring for me on Safari (version 13.1) for Mac (Catalina 10.15.4) as well as Safari and Chrome for iOS (13.4.1). Works fine in Chrome for Mac. @Finsweet any ideas? It must be something to do with how my collection items/divs are set up, because the bug doesn’t occur on the tutorial’s test sites (both implementations), but I can’t figure out why!
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!
The workaround:
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:
