gatsby-plugin-image breaks on iOS about gatsby-plugin-no-javascript HOT 9 OPEN

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

from gatsby-plugin-no-javascript.

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

from gatsby-plugin-no-javascript.

Hi @falconmick ,

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

from gatsby-plugin-no-javascript.

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

from gatsby-plugin-no-javascript.

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

from gatsby-plugin-no-javascript.

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).

from gatsby-plugin-no-javascript.

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

from gatsby-plugin-no-javascript.

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.

from gatsby-plugin-no-javascript.

from gatsby-plugin-no-javascript.