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.
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)
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!
Check back with me in 2019
@ben Did you fix it yet? - checking back in 2019
2020... safari still has bugs with srcset/sizes...
Just use a couple of sources instead of
Just helped me with this problem.
Safari work with srcset from 7.1 version.
It is a bit of a pain in the butt to have to do that cross browser testing to fix, but it is possible!
Wait are you saying you know of a fix? 😃
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!
even is very buggy, as it would download both the
Is there any recommended way to get it not to download the extra image?