Gatsby: [gatsby-image 1.0.7] Bug: Images doesn't show on Safari (but chrome OK)

Created on 7 Oct 2017 · 5Comments · Source: gatsbyjs/gatsby

Just have updated to gatsby-image 1.0.7. it's working well in Chrome but in Safari the images aren't showing up. I'm using the sizes option:

              childImageSharp {
                sizes(maxWidth: 1200) {
                  ...GatsbyImageSharpSizes_noBase64
                }
              }

Am I the only one with this bug?

Source

eur2

Most helpful comment

IntersectionObserver is indeed not available without polyfill in stable Safari currently

Haroenv on 10 Oct 2017

👍3

All 5 comments

Could you try [email protected]? I just tried your example query, and it works for me in Safari.

gatsby_image_safari

EmilTholin on 8 Oct 2017

@EmilTholin Thanks for your reply. Is the lazy-load working for you in Safari?

I just have updated to 1.0.9. Now Images are showing up in Safari but the lazyload still doesn't work. It's loading all the images at once. Probably because of the non-supportive intersection-observer in -webkit browsers.
Now If I add a Int-Obs polyfill like this package , the images aren't showing up in Safari… here is the html result:

<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden; z-index: 1;">
<div style="width: 100%; padding-bottom: 72.3%;"></div>
</div>

eur2 on 8 Oct 2017

Interesting. It does not lazy load in Safari, as you say. I don't know enough about Intersection Observer to say what it could be, sadly. It looks like it is being worked on.

gatsby_io_safari