Lazysizes: Wrong calculated width outputted by data-sizes="auto" (Chrome only)

Created on 13 Jun 2020 · 1Comment · Source: aFarkas/lazysizes

This is on Chrome only. It seems to be fine on Safari and Firefox.

Please size your browser to 2000px wide, data-size="auto" outputs sizes="68px".

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100%;
    }
    img {
      width: 100%;
    }
  </style>
</head>
  <body>
  <h1>Broken</h1>
  <div>
      <img class="lazyload" data-sizes="auto" data-srcset="images/1500.jpg 1500w, images/3000.jpg 3000w, images/4500.jpg 4500w" alt="Alt Text"/>
  </div>
  <script src="lazysizes-gh-pages/lazysizes.min.js"></script>
  </body>
</html>

http://www.klash.nl/dump/lazysizes-test/broken.html

_I've narrowed it down to what caused it._

One is removing . This could be because of putting it to standards mode? But then a lot of other people would have the same problem.
http://www.klash.nl/dump/lazysizes-test/working-doctype.html

But when leaving the DOCTYPE. And setting the alt attribute to just two characters, it will also work.
http://www.klash.nl/dump/lazysizes-test/working-alt.html

I tried RTFM. But maybe I'm still missing something?

Latest Chrome version: Version 83.0.4103.97 (Official Build) (64-bit)

Source

virgils

Most helpful comment

The display property of an img is inline by default. Therefore it doesn't take any width values. If you want to set the width you also have change the display property: img[data-sizes="auto"] { display: block; width: 100%; }

https://github.com/aFarkas/lazysizes#RTFM ;-)