<img> sizes attribute supported in Safari but missing from JS img object

Question

Safari now supports <img> srcset & sizes attributes (http://caniuse.com/#search=srcset) and in testing it works.

If you visit the feature detection library http://featurejs.com using Safari it (wrongly) reports that sizes is not supported.

Because sizes is missing from the img object.

If I visit a page in Safari which has an image defined something like:

<img srcset="smallpic.jpg 300w, mediumpic.jpg 600w, bigpic.jpg 1000w" sizes="(max-width: 600px) 100vw, 50vw" >

then in the console try this:

var img = document.querySelector('img'); console.log(img.srcset); // prints srcset definition console.log(img.sizes); // undefined

But it correctly reports img.sizes in Chrome or Firefox.

I want to be able to manipulate sizes for dynamically added content.

Does anyone know any way to access the property? Maybe in Safari it goes by another name (wishful thinking).

Tab Atkins-Bittner · Accepted Answer · 2016-02-11 21:03:26Z

1

That's a bug in Safari, but you can work around it by just retrieving the attribute value directly with img.getAttribute("sizes");

answered Feb 11, 2016 at 21:03

Tab Atkins-Bittner

18.5k2 gold badges35 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

terraling Over a year ago

Thanks for that. Yes, I already tried retrieving the attribute like that, which works, and you can also notionally set the attribute with img.setAttribute(). Unfortunately it has no effect, the sizes property is missing on the img element node and I've concluded it is a dead end trying to get it to work in Safari.

Collectives™ on Stack Overflow

<img> sizes attribute supported in Safari but missing from JS img object

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related