Responsive images not working as expected in Safari and IE Edge 18+

[tomgenoni]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When using responsive images in React, Safari v12.0.3 and IE Edge v18 request and download the image provided in both the <source> and the <img> fallback.

<picture>
     <source type="image/jpeg" sizes="500px" srcSet="2000.jpeg 2000w" />
     <img alt="test case" sizes="500px" src="fallback.jpeg" />
</picture>

If the current behavior is a bug, please provide the steps to reproduce

Load the examples below in Safari v12 and inspect the Network > Image tab.

HTML (Expected)

Example: https://safari-responsive-image-html.netlify.com/
Source: https://github.com/tomgenoni/safari-responsive-image-html

React

Example: https://safari-responsive-image-react.netlify.com/
Source: https://github.com/tomgenoni/safari-responsive-image-react

What is the expected behavior?

• Safari and Edge should only request and download the image provided in the <source>. Safari and Edge work as expected loading the HTML example.
• Chrome 73 and Firefox 66 already work as expected in both the HTML and React examples.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• The React example uses https://github.com/facebook/create-react-app

"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-scripts": "2.1.8"

• Browsers affected are Safari on macOS and iOS and IE Edge 18, Windows 10.
• I don't know if this worked in previous versions of React.

[aweary]

Thanks for the detailed issue @tomgenoni! Can you try reproducing using the DOM APIs instead of just raw HTML? For example:

const source = document.createElement('source');
// set the attributes...
const img = document.createElement('img');
// set the attributes...
const picture = document.createElement('picture');
picture.appendChild(source);
picture.appendChild(img);

That would be more representative of what React does and would help identify if this was a browser issue (most browser-specific issues like this are).

[tomgenoni]

Thanks for quick response. I had tried a JS injection previously but not using the DOM APIs and, yes, the same problem does exist.

Example: https://safari-responsive-image-js.netlify.com/
Source: https://github.com/tomgenoni/safari-responsive-image-js

I assume then this is a browser issue. Bummer.

[tomgenoni]

Closing since this is not actionable for React.

[danoc]

Related bugs in Safari:

• https://bugs.webkit.org/show_bug.cgi?id=177068
• https://bugs.webkit.org/show_bug.cgi?id=190031