DEV Community

loading...

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

ben profile image Ben Halpern ・2 min read

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.

Discussion (9)

Collapse
tbodt profile image
tbodt

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!

Collapse
ben profile image
Ben Halpern Author

Check back with me in 2019

Collapse
flexdinesh profile image
Dinesh Pandiyan

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

Collapse
thrnd profile image
Daniil Kiyanov • 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>
Enter fullscreen mode Exit fullscreen mode

Just helped me with this problem.

Collapse
letsbsocial1 profile image
Maria Campbell

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

Collapse
ben profile image
Ben Halpern Author

Wait are you saying you know of a fix? πŸ˜ƒ

Collapse
letsbsocial1 profile image
Maria Campbell

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!

Collapse
vasilvestre profile image
Valentin Silvestre

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

Collapse
adardesign profile image
Eliazer Braun • Edited

even is very buggy, as it would download both the and the fallback image,

Is there any recommended way to get it not to download the extra image?

Forem Open with the Forem app