Wrong positioning of the grid items if the stamp has a left margin

[bobamann]

Hi

I want to position two stamps in a 100 percent wide grid with 20 percent column wide. If I give the second stamp a left margin, the position of the first grid item is wrong or correct depending on the browser width. Sometimes the left margin is OK with 40% sometimes with 60% not. If you change the browser wide you see whats happend. This only seems to be a problem in Firefox and only occurs when the width of the grid container is not divisible by the number of columns. If the grid container has a width of 1233 pixels, the error is visible.

Test case: https://codepen.io/bobamann/pen/WKOYNL

[desandro]

Thanks for reporting this issue. This is likely related to desandro/masonry#1057, which involves Firefox changing its value with getComputedValue.

[bobamann]

There seem to be rounding errors in firefox. The solution of Khaash to use float:left on the sizer has no effect in this case. I set the width of the grid container to 1233px and the problem is visible. If you change the width to 1235px everything is fine. Test case: https://codepen.io/bobamann/pen/NBvaxj

My solution is to change the width of the container so that it is divisible for firefox by the number of columns. Not elegant but it works. Test case: https://codepen.io/bobamann/pen/zLdEEb

Now the lyrics in the new example are much better ;-)