Question

The attributte "srcset" which was working with polyfill, until chrome 33 is not working anymore in the version 34. As you can see in this link http://jimbobsquarepants.github.io/srcset-polyfill/ if you access using chrome 34 the imagem that shows is the mobile one, because chrome is not reading the srcset, but if you open in a different browse it'll show the desktop image. Any ideas why this is happening?

Was it helpful?

Solution

This happens since the polyfill has feature detection for the srcset attribute:

var srcsetSupported = "srcset" in document.createElement("img");

In Chrom(e|ium) 34 this test yields "true", but in reality the srcset attribute seems to not be supported. So neither a native implementation nor the polyfill handles the attribute.

Edit: The problem is that Chrome 34 supports the srcset attribute, but only partially: The src is only chosen depending on the device-pixel-ratio (the x setting), but ignores the viewport (w and h settings).

Edit 2: More research and asking around led me to this:

There are two specifications of the srcset attribute.

  • The first one includes the possibility to define the maximal viewport width and height for which to use for an image.
  • The second one (can't find a good link) only allows to define a maximal device-pixel-ratio for which to use an image. To switch images depending on the viewport width, a <picture>-tag will be used, with <source>-elements allowing full media queries to specify when to use which.

Chromium implements the second version of the srcset attribute, but not yet the picture tag.

Here are some discussions about this (Thanks to Mat Marquis to point me to those):

Workarounds

  1. Use a polyfill that supports the <picture>-tag together with the limited srcset (I don't know one). This will probably be more future-proof (but will probably need adaptions from time to time, the standard has not stabilized yet).
  2. Switch off feature detection in the current polyfill and always use it. This will probably break sometime in the future.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top