masonry calculate right 0% only on FireFox

[mosijava]

I use masonry on my site and the problem is : when you open this page on chrome, masonry layout images correctly but in Firefox it only calculate top not right (right is calculated 0% all the time). I initiate masonry with this code:

$('.ArticleImgLightBox').imagesLoaded( function() {
	$(".ArticleImgLightBox").masonry({
		itemSelector: '.lightBoxPic',
		columnWidth: '.lightBox_size',
		percentPosition: true,
		isOriginLeft: false,
		gutter: '.lightbox_gutter_size'
	});
});

am I doing something wrong? or it's bug of masonry.js?

[nebrot]

See #1053 Try to comment out //columnWidth: '.lightBox_size', this fixed the problem for us in Firefox 61.

@desandro I have created a CodePen where yo can see the issue in Firefox 61: https://codepen.io/anon/pen/mjrvPQ

[Khaash]

I think i found the cause of the problem: when using getComputedStyle() to calculate the sizes of the items Firefox (and probably Safari) has changed the behaviour for margins. For non-floating elements the margin-right property is not the defined resolved value but the actual distance from the right border to the right end of the parent element. This means that when masonry calculates the outerWidth of the sizer the result is the full width of the container, so everything gets positioned on one column.

The easy solution i found (which seems to work much better than removing the columnWidth option) is using a float:left; on the sizer element. I have no idea why but with floating elements the value returned by getComputedStyle() is the one you write in the CSS.

[mosijava]

hi @nebrot, thank you, commenting out the columnWidth works fine, but we had used it for a reason. is it safe to remove it permanently?

[nebrot]

commenting out the columnWidth works fine, but we had used it for a reason. is it safe to remove it permanently?

We used it for a reason too..But with this setting it's not working at all. Try the temporary solution of Khaash, it seems to be better than removing the setting.

[desandro]

Thanks for reporting this issue. I'll have to take a look.

[morgant]

I can also confirm that setting float: left; on the our sizer element, when using the columnWidth setting, resolved incorrect column width calculations in Firefox.