Support » Plugin: lazysizes » LazyLoaded images are invisible on Safari Mobile (iPad)

  • Hi Patrick!

    Long time no see πŸ™‚ Your plugin worked great so far, but today I noticed, that all lazyloaded images are invisible – but that’s only happening on my old iPad (on Safari Mobile 9.0). But it worked before, so the problem probably came with one of the last updates of your plugin.

    Btw in all other browsers and devices it all works as planned. If I can help you with finding the problem, just tell me what to do πŸ™‚

    Have great day!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Patrick Sletvold

    (@16patsle)

    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

    Thread Starter dutze

    (@dutze)

    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 7 months ago by dutze.
    Plugin Author Patrick Sletvold

    (@16patsle)

    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

    Thread Starter dutze

    (@dutze)

    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!

    Plugin Author Patrick Sletvold

    (@16patsle)

    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

    Thread Starter dutze

    (@dutze)

    Hi Patrick,

    ok thanks for the info, then I will just enable both πŸ™‚

    Sounds good!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘LazyLoaded images are invisible on Safari Mobile (iPad)’ is closed to new replies.