fix(gatsby-image): Fix issue where Safari downloads multiple resolutions #11920
Conversation
Safari browser (Safari 12 / Mac OS) downloads multiple assets for a single `Img` tag. The observed behavior is that the attributes of the `img` tag are queued early in the parsing of the document. Resolved by removing the fallback `<source>` and placing those value back into the `<img>` tag. Additionally the order of the attributes of `img` are important as well. If `src` preceeds `srcSet` in the `<img>` Safari’s Pre-parser will enqueue both images to download. Finally - added a note regarding a dependency on IntersectionObserver for lazy-loading
sidharthachatterjee
changed the title
|
@tbrannam Looks good but want to quickly clarify I can't seem to reproduce this issue on https://using-gatsby-image.gatsbyjs.org/prefer-webp/ Maybe I'm misunderstanding? |
|
Can you tell me the version of Safari and MacOS you are running?
…________________________________
From: Sidhartha Chatterjee <notifications@github.com>
Sent: Wednesday, February 20, 2019 3:46:26 PM
To: gatsbyjs/gatsby
Cc: Todd Brannam; Mention
Subject: Re: [gatsbyjs/gatsby] fix(gatsby-image): Fix issue where Safari downloads multiple resolutions (#11920)
@tbrannam<https://github.com/tbrannam> Looks good but want to quickly clarify
I can't seem to reproduce this issue on https://using-gatsby-image.gatsbyjs.org/prefer-webp/
Maybe I'm misunderstanding?
[screenshot 2019-02-21 02 15 16]<https://user-images.githubusercontent.com/7701981/53123214-9694db00-357e-11e9-8051-e61a9eb99171.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#11920 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAEz3Re4qUY1uiM1WBwYaTmwldFxunIWks5vPbQigaJpZM4bEg57>.
|
|
Away from computer at the moment. Safari 12 on macOS Mojave Can tell you exact minor versions a little later |
|
I'm on High Sierra still but using Safari 12.0.3. I've spot checked Mojave on a colleague's machine and was able to reproduce the same. Additionally we have reproduced this same issue on Safari - iPhone X 12.1.2
|
|
So strange. I still can't reproduce this. Check out versions in the screenshot.
|
|
This is disappointing - I cannot see a reason why we are getting different results. I have run out of test devices to try to narrow it down. I've also tried in 'private window' as well as well as bypass cache in the inspector to try to vary the behavior - but they all seemed to give me the same results. |
|
I reproduced this locally with very weird findings - for some reason I saw 2 different sizes being downloaded ... only if safari window was in certain width range - somewhere between 720 and 760 px wide (below and above that it was just grabbing single "pug" image) - it might happen in more scenarios, but I was happy enough I could reliably reproduce that and didn't search for more. Also verified that the changes in the PR fixes it, but didn't yet look through the code changes here. |
|
@pieh great callout
So the failcase would only occur if the viewport fell outside that breakpoint. |
|
@tbrannam That makes sense. Merging this in. |
|
Published in gatsby-image@2.0.30 |
Description
Safari browser (Safari 12 / Mac OS) downloads multiple assets for a single
Imgtag.The observed behavior is that the attributes of the
<img>tag are queued early in the parsing of the document.Resolved by removing the default (non-webp)
<source>and placing those value back into the fallback<img>tag. Additionally the order of the attributes of<img>are important as well. Ifsrcattributes precedessrcsetin the<img>Safari’s pre-parser will enqueue both images to download.Finally - added a note regarding a dependency on IntersectionObserver for lazy-loading
Testing Fail-case: https://using-gatsby-image.gatsbyjs.org/prefer-webp/ note that each image has two downloaded image sizes (also note that the markup for the cactus image is referenced twice, thus 4 images are downloaded).
Related Issues