gatsby-plugin-image breaks on iOS

[falconmick]

Describe the bug the Gatsby plugin image solution works on desktop and most browsers but not on iOS when used with this plugin. I have one image which has a blur reveal and one with none and the blur one shows always as a blur and the none one just doesn’t show: https://github.com/falconmick/blog https://www.mcrook.com/blog/

anyone experience this issue or have any ideas on how to solve?

cheers!

[falconmick]

I've narrowed the issue down to safari not supporting lazy loading by default. If I turn it on inside experimental everything works.

Currently I'm looking to grab the shim that gatsby-plugin-image sets up inside SSR and copy paste it

[falconmick]

Hmmm no luck so far. It appears the problem image has its src and srcSet prepended with data.... but why does it work on chrome/Firefox and iOS IF lazy load is enabled.... confusing

Tomorrow I'll write a SSR plugin that creates a script which will copy all dataSrc and dataSrcSet to their non data counterparts and see if that works

[meneerj]

Hi @falconmick ,

I am experiencing the same problem. No solution yet though. I'm interested to hear if you did manage to solve it.

[falconmick]

Not yet, I hoped that the ios15 update would enable lazy load but it didn't so still bugged

[falconmick]

Oh yeah I didn't update this issue thread... the issue is lazy load on ios15, if you unable lacy load under experimental features the problem is solved

[meneerj]

Oh yeah I didn't update this issue thread... the issue is lazy load on ios15, if you unable lacy load under experimental features the problem is solved

That's nice, to visit my website with my own iPhone. But how do I enable the experimental features on all clients that want to visit my website with iOS 15? I can't right? And btw, I also notice it is occurring on Safari on the desktop (MacOS Big Sur).

[falconmick]

Here is how to enable https://user-images.githubusercontent.com/713449/134927370-62a3b4ff-d933-4edc-8113-e234db0091bf.mov

[meneerj]

Thanks for your video and that you took the effort to do so.

But what I meant was: this only ensures that I myself get to see the website correctly. All other visitors of my website with Safari will probably have that feature disabled. So they see broken/missing images.

I need the no-javascript option on my website for a very specific reason. On one page I include a React webapplication and that page breaks because of DOM errors. I think Gatsby Javascript is messing with the DOM. But if I switch of Javascript everywhere, Safari visitors don't get images.

So what worked for me is I have forked this repo and created an includePaths option. On all pages the Javascript is left intact and the image loading works. Only on my special page the Javascript is stripped, so I am saved.

Good luck if you still need a solution for the visitors of your website and thanks for your response.

[falconmick]

Oh I was linking the video so you could see how it works if this feature is on and maybe it would help spark some insights into the cause of the issue. Is this somthing that could be submitted as a PR into the main repo?

On Mon, 27 Sep 2021 at 10:43 pm, meneerj @.***> wrote:

Thanks for your video and that you took the effort to do so.

But what I meant was: this only ensures that I myself get to see the website correctly. All other visitors of my website with Safari will probably have that feature disabled. So they see broken/missing images.

I need the no-javascript option on my website for a very specific reason. On one page I include a React webapplication and that page breaks because of DOM errors. I think Gatsby Javascript is messing with the DOM. But if I switch of Javascript everywhere, Safari visitors don't get images.

So what worked for me is I have forked this repo and created an includePaths option. On all pages the Javascript is left intact and the image loading works. Only on my special page the Javascript is stripped, so I am saved.

Good luck if you still need a solution for the visitors of your website and thanks for your response.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/itmayziii/gatsby-plugin-no-javascript/issues/32#issuecomment-927943189, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFOF2MZHFWNKXNZI4PNT33UEB7HPANCNFSM5D3UB7WA .