Not working erratically without min-width or min-height

[zocoi]

We have the following code placement in the bottom of our website

    <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=IntersectionObserver%2CIntersectionObserverEntry"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js"></script>
    <script type="text/javascript">
      const observer = lozad('[data-src]');
      observer.observe();
    </script>

And it seems to work fine for me but some of our users reported the images are not loading at all and I couldn't produce it locally. I noticed those users may have older machines but I'm not sure if it's a factor

We then try add some css and it seems to work

img[data-src] {
  min-width: 1px;
  min-height: 1px;
}

here's the example of the image

<img data-src="https://hoodline.imgix.net/uploads/story/image/389275/o.jpeg?auto=format" src="" />

Maybe we can update the README? What do you think?

[coder-pm]

I had the same issue, adding min-width (already had min-height) solved it. Seems like related to: https://www.chromestatus.com/feature/5878481493688320