I’ve been having a lot of problems with my site https://www.darkmodedesign.com trying to incorporate a better pagination experience. I’m currently trying out 2 approaches; infinite scroll and load more:
https://webflow.com/blog/infinite-scroll-tutorial
https://cmsdocs-howto.webflow.io/loadmore/example1
Originally, both of these methods were causing issues in Safari when loading in images past page 1, and you can read up on my original problem in the seperate forum post: CMS images not loading after page 1 (Safari only) - Infinite scroll & load more issue
From what I can tell, the issue with Safari was something to do with not having an explicit height set for the images or image container (setting them to Auto or 100% and letting the width determine the height). Eventually I figured out a way around this issue by forcing the height of images – setting the container bottom padding to 75% and setting the img itself to absolute. Luckily all my images are the same aspect ratio so this works responsively. However this has caused a 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, 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 in Safari (Mac and iOS), Chrome for Mac is fine. This is also happening with both implementations I am trying. 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
With the infinite scroll approach in particular, you can see how when you refresh a “page”, the images are back to their proper resolution. For instance here is the same image being loaded first with javascript, and then once the page is refreshed:
My read-only project: https://preview.webflow.com/preview/darkmodedesign?utm_medium=preview_link&utm_source=designer&utm_content=darkmodedesign&preview=88d10c92a6c8d96a65461471b4ca1ed6&pageId=5eb3f6d8003377bbd4c51ec7
Sorry for the long post, this problem has been causing me grief and I’m trying to include as much info as I can. I am reaching the limit of 100 CMS items loaded at once (I have currently disabled pagination on the public home page) and so if I can’t fix this issue soon, I will either need to opt for a subpar pagination experience or live with the fact that Safari users will be seeing blurry low resolutions images 