Data-Srcset deleting image references in Safari

[Seán O'Grady]

I'm having an issue with srcset in safari. Layzr loads and is executed but for images with data-srcset it wipes out all references to images and leaves the node blank.

Browser Version : Safari Version 9.1.1 (11601.6.17), same happens on iOS Safari Latest version.
Browser Console : Empty, when I console log the elements that the lazyr events are being fired on I get the following results

https://www.dropbox.com/s/23r5e9nler8kspt/Screenshot%202016-06-10%2018.37.59.png?dl=0

Relevant HTML/JS

Source

<figure class="content__image">
<img data-normal="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWideMobile/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013" data-srcset="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWide/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013 870w" width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

Expected outcome

<figure class="content__image">
<img src="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWideMobile/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013" srcset="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWide/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013 870w" width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

Actual Outcome

<figure class="content__image">
<img width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45" />
</figure>

https://www.dropbox.com/s/nxuquubek4a95d1/Screenshot%202016-06-10%2018.40.53.png?dl=0

There are a few workarounds but none that are perfect.

• Disable lazyr
• Use data-normal on its own instead of data-srcset too
• Use data-retina instead of data-srcset

[Michael Cavalea]

@miralize hey man. per the setSource method, if the browser supports srcset (which Safari 9.1.1 does), Layzr will set that attribute and remove all configuration attributes from the image when it loads. Setting both src and srcset isn't needed in browsers with srcset support, so Layzr doesn't. That explains why you're not seeing the src attribute.

Your Expected Outcome should look as follows:

<figure class="content__image">
  <img srcset="https://cloud.lovindublin.com/images/uploads/2016/06/_blogWide/Screen-Shot-2016-06-09-at-12.29.45.jpg?mtime=20160609123013 870w" width="400" height="182" alt="Screen Shot 2016 06 09 At 12 29 45">
</figure>

If you navigate to the demo page in Safari 9.1.1, you'll see the demo images loading correctly (and using srcset). In the inspector, go ahead and swap your source for one of the srcset attributes. For me, it loads without a problem. Can I see the relevant portions of the JS? I don't think the issue is in your HTML.

[Seán O'Grady]

Yep youre right, that outcome is what usually happens. It's odd as it's only happening on a few select pages/articles on the site and debugging the cause of whats mixing things up is proving difficult using Safari dev tools.

My setup is pretty standard, using with browserify which is why I have it set to the global/window. For brevity

var Layzr = require('layzr.js);
global.layzr = new Layzr();

   document.addEventListener('DOMContentLoaded', function() {
       ....
       layzr.update().check().handlers(true);  
   }

and just to confirm, this is only the case withdata-srcset, retina works as expected

[Michael Cavalea]

@miralize really strange man, setup looks good.

if its only happening on a few pages of your site, it sounds to me more like an issue with your local environment than with the library code.

I would try putting the image source in an image tag on that page, and making sure that URL is accessible from that page as you have it. if you have a public link, I'd be happy to take a look, though with nothing in the console I'm not sure I'd know where to start.

[Seán O'Grady]

@callmecavs Thanks I've sent you an email with the public link. I've tested it in the Safari Tech Preview 6 – it works! I don't know what to believe anymore

[Michael Cavalea]

@miralize hey man - took a look, and it's broken for me as well. my guess is that, since its fixed in the tech preview, its likely a browser bug.

if you'd prefer to use srcset, my advice would be to use the src:after event to check and make sure each image has a src or srcset attribute, and if it doesn't, set it manually. this should help you work around this issue until it's resolved in Safari. otherwise, fallback to the other data attributes in Safari

[Seán O'Grady]

Hi just a small update on this issue. I've had a look on Edge and it appears to suffer from the same issue