Safari's implementation of srcset is buggy, rendering the whole feature basically useless

#webdev #rant #webperf

I'd love for someone to point out a solution, but I am seeing that images loaded over AJAX in Safari do not render at all if the srcset attribute is present. I could not get it to work, and found some others with the same issue. The srcset attribute allows you to define several different sources to be rendered based on the size of the window. It has the potential to be a major asset for web performance.

Deciding on the image of choice in JavaScript instead of HTML has the potential to degrade performance, and choosing based on the device header is a complicated solution for a feature that is supposed to be simple. The srcset attribute is a great feature when it works, but it fails in cases that are far from edge-cases in Safari. This basically makes the whole feature useless or flimsy at best.

This post argues that "inconsistent implementations" are a feature and not a bug because it forces "browsers to compete". I'm not sure what's meant by that or if this issue can be traced back to that line of thinking. But if this is the result, I certainly disagree with the approach.

I plan to look into the <picture> element as a possible replacement. I have no idea yet if it has the same issue. It's generally recommended to "just use srcset" for most typical use cases. But since that is not implemented properly, moving to <picture> is a fine solution for my purposes.

Top comments (9)

tbodt • Oct 16 '17

Good news! Safari is open source! You can fix it yourself! All you need is to spend years figuring out how the code works, then send a patch and maybe it'll make it into Safari after a few macOS releases!

Ben Halpern • Oct 16 '17

Check back with me in 2019

Dinesh Pandiyan • Feb 28 '19

@ben Did you fix it yet? - checking back in 2019

Daniil Kiyanov • Oct 16 '20 • Edited

2020... safari still has bugs with srcset/sizes...

Just use a couple of sources instead of srcset / sizes like that:

<picture>
    <source srcset="img--s--lg.webp" media="(min-width: 1281px)" type="image/webp" />
    <source srcset="img--s--sm.webp" media="(max-width: 1280px)" type="image/webp" />
    <source srcset="img--s--lg.png" media="(min-width: 1281px)" type="image/png" />
    <source srcset="img--s--sm.png" media="(max-width: 1280px)" type="image/png" />
    <img src="img--s--lg.png" alt="alt text" />
</picture>

Just helped me with this problem.

Valentin Silvestre • Oct 19 '17

Safari work with srcset from 7.1 version.
developer.mozilla.org/fr/docs/Web/...

Maria Campbell • Oct 17 '17

It is a bit of a pain in the butt to have to do that cross browser testing to fix, but it is possible!

Ben Halpern • Oct 18 '17

Wait are you saying you know of a fix? 😃

Maria Campbell • Oct 18 '17

You're probably having problems because perhaps you don't have it set up exactly as it should be set up. Post on stackoverflow about it where someone else specifically had problems with srcset on Safari: stackoverflow.com/questions/408075... I have also used srcset, and this is an example of my implementation: github.com/interglobalmedia/travel... And this stackoverflow theread about support: stackoverflow.com/questions/143974... Tried to get into caniuse to share their latest info, but couldn't at the moment. They're probably overloaded. Hope his helps!