LazyLoaded images are invisible on Safari Mobile (iPad)

Hello @dutze!

Could you check if anything’s different if you enable/disable the optimized scripts option? My guess is that lazysizes bails out of lazyloading because it thinks the browser is not supported, and there’s some differences in the optimized script that might affect it. Also worth noting that the new/experimental blurhash option has somewhat limited browser support, but even if you’ve enabled that, the images should still lazyload correctly in older browsers.

Also, if the optimized scripts doesn’t change anything, it would be great if you could check the browser console. It’s not super easy to do on an iPad, but I think there’s some bookmarklet script that can open a mini devtools. If you have a Mac, the easiest is probably to connect to it through safari’s devtools. Let me know if you need more details, or if this step proves difficult though, I could look into reproducing it myself on an old iOS device if needed.

Best regards,
Patrick Sletvold

Hi Patrick ??

You mean the second checkbox “Load custom lazysizes scripts and styles, optimized for performance.”, right? When I disable it, all images are displayed on my iPad, so it seems to work ??

Do you think, it’s important to enable the checkbox “Add fallback for users without JavaScript.”? Meaning: Do you think, many users out there have Javascript turned off? I don’t think so, do you think? I’m asking, because the no-js-fallback doesn’t work properly with my picture elements, but I don’t want to mess with that, when it’s not that important to offer the fallback.

Thanks for your help! ??

• This reply was modified 4 years, 4 months ago by dutze.

Yes, that was the option I meant. Didn’t remember exactly what I named it (it’s called optimize_scripts_styles internally ??). I’ll look into the changes I made and see if any of them are incompatible. If you have the opportunity, would be very helpful if you could check with the minify option turned off too, in case that part of the process causes problems.

For the no-JS fallback it depends to some degree on the type of site. The overwhelming amount of users will have Javascript enabled, but some do turn it off intentionally usually for privacy of performance reasons. In very few cases it might be unsupported in the browser, but users of those browsers probably have other problems too. (As an aside, certain browsers, like Opera Mini, also have limited JS support but I don’t think the no-JS fallback would change anything there, as JS is technically enabled) It might not be a problem disabling the fallback, as long as the images are not crucial to the content of the site. That said, I could always look into why the fallback is failing with the picture elements in the first place. Could very well be a bug, as the picture element support is rather complex.

Best regards,
Patrick Sletvold

Hi Patrick,

I tested all 4 combinations of the first two checkboxes (first one is “Load minimized versions of javascript and css files.” and second one is “Load custom lazysizes scripts and styles, optimized for performance.”)

Here are the results – only tested on my iPad:

A) Both unchecked: LazyLoading works
B) First checked, second unchecked: LazyLoading works
C) First unchecked, second checked: LazyLoading DOESN’T work
D) Both checked: LazyLoading works

I have had both checkboxes unchecked before this test, but now that I see that both checked also works, this would be the best option regarding functionality (loading speed etc), right? ??

But still weird, that option C doesn’t work… But you don’t have to look into it, if you don’t have the time or something – for me it’s totally ok to use one of the 3 other options that work ??

Regarding the No-JS-fallback: Don’t worry for now, I don’t have the time to test it right now and decided to just not care about the no-js-users. So everything allright on my side ??

Have a nice day!

Hi dutze,

It is indeed very weird that option C doesn’t work, so I’ll have to look into that. I find it curious that the minification process seems to fix the error, but you’re right in that it would be the best option to enable both. The minimized option should noticeably improve performance, as it’s less code for users to download. The custom scripts reduces the amount of code as well, but the main benefit of that is it being only a single script file to download. That last part is not quite as big of a deal as before HTTP/2 became a thing, but should still help performance.

As for the no-JS fallback, I’ll just wait and see if I have time. I need to get out a small release for WP 5.5 support, so hopefully I can get any fixes necessary into that one.

Best regards,
Patrick Sletvold

Hi Patrick,

ok thanks for the info, then I will just enable both ??

Sounds good!