gatsby-image is requesting each image 4 times in Safari

Description

gatsby-image causes Safari (both iOS and macOS) to request the same image 4 times. To be sure that this isn’t something specific to my browser and machine I also tested this in an iOS Simulator for iOS Safari, on macOS Mojave with the latest Safari and also on a clean macOS Catalina Safari via Browserstack. They all behave the same way: The same image is requested and downloaded 4 times.

Chromium-based browsers don’t seem to have issues here.

Interestingly though in Firefox there is similar but indeterministic behavior: In Firefox (75, macOS 10.15.4) the same image sometimes is requested 2 times and sometimes only once. This erratic behavior in Firefox led me to believe that this might be some sort of race condition, but I couldn’t find the culprit.

Steps to reproduce (for Safari)

1. Create new gatsby site with the gatsby-starter-default
2. Load the index page with Safari Dev Tools open and caching disabled
3. Check the network tab to see that the same gatsby-astronaut.png is requested 4 times

Steps to reproduce (for Firefox)

1. Create new gatsby site with the gatsby-starter-default
2. Load the index page with Firefox Dev Tools open and caching disabled
3. Check the network tab while reloading the page in quick succession to see that that the same gatsby-astronaut.png sometimes is requested once and sometimes twice.

Expected result

The browser should only load one image that works for the viewport.

Actual result

The browser instead loads the same image several times.

Screenshot

Environment

System: OS: macOS 10.15.4 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 81.0.4044.122 Firefox: 75.0 Safari: 13.1 npmPackages: gatsby: ^2.20.25 => 2.20.25 gatsby-image: ^2.3.4 => 2.3.4 gatsby-plugin-manifest: ^2.3.5 => 2.3.5 gatsby-plugin-offline: ^3.1.4 => 3.1.4 gatsby-plugin-react-helmet: ^3.2.4 => 3.2.4 gatsby-plugin-sharp: ^2.5.6 => 2.5.6 gatsby-source-filesystem: ^2.2.4 => 2.2.4 gatsby-transformer-sharp: ^2.4.6 => 2.4.6

[kraynel]

After some digging, it seems there are known bugs (https://bugs.webkit.org/show_bug.cgi?id=177068 and https://bugs.webkit.org/show_bug.cgi?id=190031) in Safari: when creating a new picture with an image and source with JS, Safari incorrectly loads both srcset.

This probably explains the multiple calls.

https://github.com/facebook/react/issues/15215

I reproduced with this behavior outside of gatsby-image:

[MartinGian]

Same for me, it affects the first ever page load but we suspect that it is causing some bounce rate, users don’t seem to like image flickering or wait 😅 .

It seems that the only option we have at the moment is wait for a fix.

Thanks for your quick response!