Breakpoints and data-srcset no longer working on Chrome

[teej043]

Hi,

I just realized that Blazy features for Breakpoint options and data-srcset is having issues with Google Chrome Windows 7 Version 60.0.3112.113 (Official Build) (64-bit) lately.

This is a screendump of the demos/examples page of Blazy, as you can see the "data-srcset" on <img> is not working anymore... even if you reload the page with different size of the window.

screendump-issue-data-srcset

Curiously though, the <picture> element is working still:

screendump-picture-data-srcset

---

Now the implementation on our project is using the breakpoint option:

screendump-breakpoint

HTML

<section class="rbn rbn--image ">
   <figure>
       <img class='lazy image' 
           src='images/media/design/brand-ring.jpg' 
           alt='design' 
           data-src='images/media/design/brand-ring.jpg' 
           data-src-small="images/media/design/brand-ring_mobile.jpg">
   </figure>
</section>

JS

var imgLazy = new Blazy({
      selector: '.rbn--image .lazy.image',
      successClass: 'lazy--loaded',
      breakpoints: [{
        width: 768,
        src: 'data-src-small'
      }],
      offset:0
    });

Our setup was working well last I checked some 3 weeks ago, and then I remember several days later Google Chrome had an update, then later I found that the blazy is not working fine with the breakpoints and data-srcset for img element.

On Firefox data-srcset on img element is still working there.

screendump-firefox-data-srcset however Firefox also has some issue with the breakpoint options

I hope you could look into this issues as we are a fan of this plugin and have used it a lot on our recent projects.

Regards, Teej

[jimmleon]

Hi @teej043, i recently used the bLazy plugin and it's really excellent work. However i am also having some problems with srcset, though seems to work fine. my example code is like: <img class="b-lazy" sizes="(max-width: 600px) 100vw, (min-width: 601px) and (max-width: 992px) 50vw, 33.3vw" data-srcset="image-960.jpg 960w, image-720.jpg 720w, image-480.jpg 480w" src="image-thumb.jpg" data-src="image-480.jpg" />

this means that above 993px the images display in a 3-column layout and therefore the browser should pick the 480px image. But it never does that in Chrome. Firefox seems to work fine.

Have you finally found any workaround or have you anything to suggest me in order to make it work?

[sfresta]

Hi @teej043, do you solved? Blazy is not updated since 2016..