Lazysizes not showing images on iOS Safari 11.0 & 12.0

[briankoudijs]

trafficstars

First of all thanks for creating Lazysizes. It performs very well. Although I have a problem where users of Safari on iOS 11.0 & 12.0 are not seeing any images loaded via data-src. Is this a known problem? Or are these versions too old to understand the way Lazysizes is working. Couldn't find an issue in the issues list directly related to this.

Thanks

Brian

[aFarkas]

I just tested with 12.2 and it works perfect. Can you give me a testcase that shows your problem.

It is a bug. But I need to be able to reproduce it.

[briankoudijs]

Thanks for the quick reply. Yeah it works perfect on newer versions. The problem is appearing on https://www.maxilia.nl Maybe you can check?

[aFarkas]

I now additionally tested your site using 11.4 and I still can not reproduce. I will try 12 soon. but what I can tell is that you are using a fairly unusual and unnecessary markup:

<picture class="fixed-ratio" style="padding-bottom:61%;">
    <img data-src="...." class="fixed-ratio-content lazyload">
</picture>

Please change this to the follwing:

<div class="fixed-ratio" style="padding-bottom:61%;">
    <img data-src="...." class="fixed-ratio-content lazyload" alt="" />
</div>

[briankoudijs]

Thanks for taking the time to look into this. I think this is the result of some mixed tests.

Thanks.

On Sun, 14 Apr 2019, 00:02 Alexander Farkas, [email protected] wrote:

I now additionally tested your site using 11.4 and I still can not reproduce. I will try 12 soon. but what I can tell is that you are using a fairly unusual and unnecessary markup:

Please change this to the follwing:

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aFarkas/lazysizes/issues/637#issuecomment-482893498, or mute the thread https://github.com/notifications/unsubscribe-auth/AAt4yR1RfoKSdrFvj4Qm38w6zqLOIE9eks5vglPXgaJpZM4crmaI .

[tqwewe]

Any updates to this? I'm also experiencing this issue when using a <picture> tag... It works fine on Chrome and Firefox, but not on Safari.

[ngBulgaria]

I also have the same problem it appears not so often but still does

[innesian]

I had the same issue and found this thread. The issue for me wasn't with lazysizes but Safari and image URLs not including an extension. We're using Amazon's static image resizing solutions and the urls do not contain the .webp extension. Safari attempts to use that type despite not supporting it and the image fails to load. The solution is to include the image MIME type on the source tag for unsupported formats, this lets Safari know to use the next compatible image.

<picture>
  <source type="image/webp" srcset="https://x.x/imagestringnoextension==">
  <img src="https://x.x/imagestringnoextension==">
</picture>

[huseyin39]

I'm sharing my experience. I faced an issue with images on Iphone, using Lazysizes. I thought the library was the reason.. Actually I was serving WebP formatted images.. which is not supported by Safari.

[heyitsbryanm]

Also sharing my experience using React & NextJS:

    "next": "^9.5.4",
    "next-on-netlify": "^2.3.2",
    "react": "^16.13.1",

The lazyload class remains lazyload regardless of scrolling to the element in Safari. I have no clue why: https://www.loom.com/share/0844e68699774fbab41b22a06bc0ec0c

Link for testing: https://beta.daysetter.com/content/california-us/inyo-county-ca/itinerary/a-daytinerary-to-death-valley-from-vegas

I'm using a blur placeholder, so I'm thinking of just falling back to a normal image (non blurred).

~edit: It's worth mentioning that I'm using Lazysizes with the imgix-react component.~

edit2: testing with an img element also didn't work:

<img src="http://bryansandbox.imgix.net/_static/images/img02.jpg?w=50&amp;blur=100&amp;auto=compress&amp;w=500" className="lazyload" data-src="http://bryansandbox.imgix.net/_static/images/img02.jpg" />