Gatsby Image placeholder not being replaced on Safari iOS

jonathanfilbert commented 3 years ago

Description

Fluid Images that are using Img from gatsby-image stuck on the svg placeholder mode and not being rendered. Normal images (I'm referring to <img src={...}/>) on the other hand, works fine. This behavior only exist on iPhone's Safari apparently, I've tried it on my Chrome, and they are all working fine. I can't really do a check on an iPhone Safari because I am in no possession of one. I've tried adding

require("babel-polyfill")

in my gatsby-browser.js but still experiencing the same result.

Steps to reproduce

Use Gatsby-Image with a fluid image. Here's my deployed site Open with safari on an iPhone or with an iPhone Simulator

Screenshots

This were captured on an iPhone error edit: I've tried opening it with an iPhone simulator, also same result more result

Expected result

All images (regardless of using gatsby-image or img ) should appear fine

Actual result

Only images that are using img seem to work, the ones with gatsby-image seem to stuck on the gray svg placeholder state and not being loaded. On Safari on a mac, I've gotten multiple error messages similar to:

The resource https://subtleindonesianmatches.netlify.app/page-data/sq/d/2625602305.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

Environment

  System:
    OS: macOS 11.0
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 85.0.4183.121
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.24.66 => 2.24.66
    gatsby-image: ^2.4.20 => 2.4.20
    gatsby-plugin-manifest: ^2.4.32 => 2.4.32
    gatsby-plugin-offline: ^3.2.29 => 3.2.29
    gatsby-plugin-postcss: ^3.0.0 => 3.0.0
    gatsby-plugin-react-helmet: ^3.3.12 => 3.3.12
    gatsby-plugin-sharp: ^2.6.37 => 2.6.37
    gatsby-plugin-styled-components: ^3.3.12 => 3.3.12
    gatsby-source-filesystem: ^2.3.31 => 2.3.31
    gatsby-transformer-sharp: ^2.5.16 => 2.5.16
  npmGlobalPackages:
    gatsby: 2.24.54

jonathanfilbert commented 3 years ago

I already tried #12074, still no luck

jonathanfilbert commented 3 years ago

Okay, so I found the problem. The problem was when I queried the images using graphql, inside of fluid, I was using:

              base64
              tracedSVG
              aspectRatio
              srcWebp
              srcSetWebp
              originalName

and when I changed the fluid query to:

          ...GatsbyImageSharpFluid

it suddenly works on Safari.

I found it quite weird, but since it's already resolved, I'm going to close the issue. Should probably address this in the documentation that you have to use ...GatsbyImageSharpFluid fragment in order to get gatsby-image to work on Safari and ios devices.

gatsbyjs / gatsby