Flex box layout broken

[jwcounts]

I've been using Masonry and ImagesLoaded on the homepage of the site I run, and recently I've run into an issue in Firefox. Whenever Masonry and ImagesLoaded are called, they move all of the .grid-items into a single column and place them at the bottom of the container.

I've tested this in Safari, Chrome, and Microsoft Edge, and all 3 of those browser work as expected.

The full site is located here: https://www.houstonpublicmedia.org. I created a test case on CodePen in which I stripped out most of the other javascript as well as a chunk of the content.

Test case: https://codepen.io/jwcounts/pen/KBKGrp

I've also tried running previous versions of Masonry and ImagesLoaded.

Masonry 4.2.2 (Packaged) imagesLoaded 4.1.4 (Packaged) Firefox 61.0.1 (macOS Mojave Beta 10.14, Win 10)

[nebrot]

Same problem for us at multiple websites with different Masonry-Versions since a few days(?). For example: Masonry PACKAGED v4.2.2 imagesLoaded PACKAGED v4.1.4 61.0.1 (64-Bit)

@jwcounts In your test is a js-error (jquery is not defined), i forked your pen and fixed it, see here https://codepen.io/anon/pen/LBVLwX

[desandro]

Sorry but Masonry does not support flex box CSS. I recommend using CSS floats as a fall back when initializing Masonry.

[jwcounts]

Thank you for that @desandro. After seeing your comment, I did some experimentation, and I found something odd. Apparently, while it might not support flexbox, it will properly lay out flex items if the container is also marked as 'display: flex.'

I updated the stylesheet in the Codepen test and it started layout everything properly:

https://codepen.io/jwcounts/pen/KBKGrp

Just FYI. Thank you for your time in looking into this.

[nebrot]

@desandro We don't use flex-layout. But we have find the problem, using columnWidth: '.grid-sizer' destroyed now the layout. Without using this setting, it works again.

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

[Khaash]

Just had the same problem, all the items get stacked in a single column. No flex used, breaks only on firefox 61.0.1, Chrome and Firefox 60.0.2 work fine. As @nebrot said removing the columnWidth option fixes the problem (btw, thanks for the help. you saved me lots of work trying to figure out what was wrong)

Guess this is some kind of bug in Firefox, let's hope they fix it soon.

[desandro]

@nebrot Can you open a new issue with a CodePen demonstrating this particular issue?

[nebrot]

@desandro See my comment in #1057 (CodePen: https://codepen.io/anon/pen/mjrvPQ )