Overlapping images with masonry and imagesLoaded in Safari

[dgobnto]

Hello,

I'm experimenting image overlapping in Safari only. Is this a known issue?
I believe it's because of the IMG tag srcset required for retina images.

Here's a 'reduced test case', that demonstrates the issue: http://codepen.io/koiastudio/pen/WrYxKE

Thanks in advance for any help!

[desandro]

Thanks for reporting this bug. Unfortunately, imagesLoaded does not yet support srcset. See desandro/imagesloaded#175. I'm closing this issue here.

[dgobnto]

Thanks for the reference.
In the meanwhile I've came up with a temporary fix.
Instead of initializing the js with $(document).ready(), $(window).load() kind of does the trick.

[ProtocolNebula]

I'm trying to fix the first load in Safari MAC, but I fixed it in iOs Safari, maybe this will help you:

if (navigator.userAgent.indexOf("Safari") > -1) {
        mas.masonry('reloadItems'); 
        mas.masonry('layout'); 
}

I hope it help you for some bug.

PS: You help mi with ".load()", thanks :)

[yairza]

Unfortunately $(window).load() happens a lot after $(document).ready() , making it to load slower.
@ProtocolNebula can you give more details on where you added this code snippet?

[ProtocolNebula]

Hi.
Sorry, I don't remember what I done exactly.
I had to make some changes to simulate a "fix" (and it still fails sometimes), you can check the "fixed code" (until I found a nice solution or page down) here: http://siichic.com/site/js/genericos.js

I hope it helps you.

[desandro]

window.load is a last resort, I recommend using imagesLoaded

[ProtocolNebula]

I'm already using imagesLoaded, but seems not work correctly without "fixes" and still fails in iPad when connection is slow (or other cases, I'm not sure).