▼
Streaming live at 10am (PST)

Srcset and Ajax conflict on safari - Solution brainstorm

Design help Custom code
#1

Hello everyone,

I have implemented @Finsweet cms library component on my site as an infinite scroll solution. It’s a wonderful tool and truly a breeze to set up. Highly recommended.

However, it turns out it is essentially not compatible with srcset images, at least not if you want your site to work on Safari or iPhone.
The reason for this is not specific to the component itself, but due to the fact that Safari has trouble making ajax calls on srcset.

Not using srcset is not an option, as I only implemented the library to improve load time in the first place.

It seems to me that this is a major enough issue to warrant a fix being included in the component (at least for me it’s a deal breaker if I can’t fix it)
And since the Finsweet team seam really open to making their tool work for people, I was hoping that if someone can figure out a good fix or workaround here, they might consider including it.

Unfortunately I don’t understand much about code yet so I can’t get this started :frowning: However I have found some threads online that may be relevant cases and include how other people have tried to work around the problem:

In case of success in getting it working on Safari with srcset, I’ll make a clonable project and how-to post for this to hopefully help others in the future. It really is a superior solution to some other clunky infinite scroll options I tried.

So, is anyone in the mood to fix some problems today?

To play around with a use case, the component is on the home page: Webflow - MILKSHAKEN

Published site is milkshaken.net

Pagination is leading to duplicate meta descriptions
#2

This is a great feedback! Please head over to our dedicated support resource and we will try sorting things out. And please update this thread once there is a satisfactory conclusion to the whole thing. Of course we want things working for everyone and we will try solving any incompatibilities.

#3

9 days on and no Webflow Forum geniuses taking us up :cry:

@dram
I did reach out to the support channel via Slack. Unfortunately the person I am in touch with does not seem to share your gusto. They keep repeating that the only workaround is to disable srcset, which I keep saying would negate the benefits the component provides, in my case and I am sure in many others.

I fully understand that this issue is not specific to your component, and it is Apple that should ultimately fix it. I have submitted what I am sure is the umpteenth bug report directly to them.
However, as things stand, your cms library essentially lacks browser support for what is Webflow’s default image setting. If this does not warrant a fix being incorporated in the component in the first place to deal with the Safari use-case, at least it needs to be mentioned in your docs to save some time all round.
The issue is present in any browser on iPhones, not just safari. Meaning a site using your component to include images will not work on iPhones if srcset is not manually disabled on Webflow, which is something you might want to mention to people during implementation.

The component works like an absolute dream in all other devices and browsers, and has made my site 10% faster. BUT I will have to ditch it if a sloution can’t be found coz I can’t have everyone with an iphone looking at a 10x10px image, where a 100VW image should be.

If you are part of Finsweet and think this is a matter worthy of attention, is there any way you can intervene towards a solution?
Some of the workarounds shared in the forum posts above (such as repasrsing images after load) seem relatively simple to me, but what do I know :weary:

I really really don’t want to go back to clunky junky infinitescroll.js, please don’t make meeee :crazy_face:

#4

Hi @milkshaken - I’m Joe, the Founder of Finsweet. Let me respond to your points above.

  • Yes, this is a Safari issue and ultimately it is their issue to fix. It does pain me that we our Library isn’t as powerful as it should because of an issue outside of our control.

  • Yes, we should be making this issue more clear to users. I’m going to add it to the docs today.

  • Most important: I’ve just assigned our lead dev to look at another potential fix. It’s marked as high priority. I shared the resources from above and will push for a solution.

Please feel open to follow up with me directly on Sweet JS or by email joe@finsweet.

#5

@Finsweet

Thank you very much for your kind response. I will drop you a message on Slack so I can stay in the loop. As I mentioned, if the issue is resolved I will be happy to stalk all the infinite scroll/ cms library forum posts on here and sing the praises of your component, as I really do think it’s absolutely fantastic.

1 Like