Image loading issues in Safari on Mac

[petrpacas]

Hey there - I noticed you mentioning that you haven't checked the plugin in Safari on Mac - well, there is indeed a problem.

From what I gathered it's related to this issue of the gatsby-image plugin.

On localhost the bg-images always load straight up w/o the "blur-up".

On live the bg-images get stuck in "blurred" phase on page load and on page change (navigation to another page on the site) the full bg-images again load (w/o the "blur-up"). If you refresh the page, you again get a stuck "blurred" bg-image.

[petrpacas]

Alright, adding the IntersectionObserver polyfill as per gatsbyjs/gatsby#4021 (comment) fixes this problem.

For the time being I recommend you add a note about this in the README.

[gregleeper]

I was looking for a way to fix this bug this morning. Thanks for posting about it @petrpacas.

[timhagn]

Finally I came around looking at this, thanks @petrpacas for finding it!
Added a small note to the current README.md@master in the Install section (Important:)
for the moment as you suggested.
I'd be happy to receive any comments on the wording before I publish the package.
And would you mind sharing how you wrapped BackgroundImage - like mentioned in the comment - as I'd like to add a already proven to work example?

[petrpacas]

Cheers 👍

Perhaps you could word it as follows:

For Safari as well as Internet Explorer you have to install the IntersectionObserver and Object-fit/Object-position polyfills. At the moment of writing neither fully implements the former feature, and IE doesn't implement the latter.

A solution to this issue was mentioned in a comment over at gatsby-image/issues

Or simply:

If you support Safari and/or Internet Explorer, you have to (at the moment of writing) install several polyfills. Both Safari and IE need the IntersectionObserver polyfill, and IE also needs the Object-fit/Object-position polyfill.

A solution to this issue was mentioned in a comment over at gatsby-image/issues

As for the wrapper, I only implemented the IntersectionObserver p/f - can't help here atm...

[timhagn]

Thanks for the review, am going with a combination of your latter and the first suggestion : ).
Am closing the issue for the moment as the adaptation is now published as v0.2.41.
But I will add some examples, as soon as a VM is set up ; ).
And of course am gonna revisit it and when the issue is solved over at gatsby-image!

[timhagn]

Ouch, clicked to early - v0.2.42 is the new designation % ).