Masonry only on page return, layout overlapping

Question

I'm currently having a weird bug. It only happens on Internet Explorer and Microsoft Edge.

On the first page load, the layout looks good, as it needs to be. Once you go to a different page, and after you decide to return to the previous page where the Masonry is, the layout is broken, overlapped.

Demo / Codepen: codepen.io/baidoc/pen/JbMBvX

and here's a video demonstration directly on IE11: https://www.dropbox.com/s/l8eiwchb5yoiygg/bug_explained.mov?dl=0

Any help would be greatly appreciated Thanks!

Answer 1

You most likely need to use imagesloaded since not all images are loaded before masonry is being called. Add imagesloaded to your page and then call masonry like this:

$('.grid').imagesLoaded( function() { $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', gutter: 20, percentPosition: true }); });