Fix 1px column gaps. Use percent values in internally

[7R5N]

Hi,

I’m not sure, but I don’t understand the way the left position is calculated on layouts based on percentage widths.

That even doesn’t work correctly in the example provided on your webpage: [http://codepen.io/desandro/pen/JFpeg]

• One Column is 20% wide
• an Item in the second column has a left value of "19.777643590381132%", or "19.79269328802039%", or "19.813567394706403%", depending on the width of the container

→ I’m not a genius on maths … but, I thought that the second column should always start at 20% instead.

This uneven percentages lead to 1px flashing gutters, depending on the size of the container.
MacOSX; Safari, Chrome, Firefox …

To me, this looks like the script re-calulates to percent, what the browser formerly calculated in pixels from the percentages provided by CSS, like:
css/percentage → browser/pixel → script/percentage

I’m aware that it’s not always possible to count with even pixels on fluid layouts: you simply can’t divide 981 pixels by 5 columns with non-comma-pixel-widths.

But, that’s what the percentage values are for. They tell the browser "that’s your job". And the browsers are able to dived the space in columns. And when I set the left values to 20% (40%, 60%, 80%) in the WebInspector, there are no flashing gutters.

→ Wouldn’t it be better to get/read the CSS width percentage value of the itemSelector element, to directly and exactly set the left value of the next item …?
[ left: 0; width: 20% ][ left: 20%; width: 40% ][ left: 60%; width: 20% ] …

[desandro]

Thank you for this feedback! This is an interesting idea. Internally, Masonry has always used pixels for its measurement of items and column sizes. The percentPosition option allows for item position to be rendered with percentages. As you noted, the output may be off due to imperfect measurement, pixel rounding, and general JavaScript decimal wonkiness.

Using percent values internally could resolve the 1 pixel gaps, but it would require re-tooling a fair amount of code to do so. I'm open to the idea, but I'd like to think on it for a bit.

[7R5N]

Yes, maybe that’s an even better point, to calculate in percentages internally – that would be more like a strategy, other than the ~fix I suggested earlier … 
After all; the big grid systems out there (Bootstrap et al) all work with percentage widths internally.

[HriBB]

Hey there. This is a repost from the incorrectly posted masonry-docs issue.

First of all, thanks for this great library! It works perfectly except for this very tiny little issue.

I'm using react-masonry-component, but I think this is an issue with masonry itself. Not really sure though. Anyway, I'm using percentPosition:true with columnWidth sizer selector and sometimes (usually on full width) there is this extra 1px space between some images.

Here's the screenshot

So how can we help you with this?

[guicara]

I had the same problem with my image gallery. The solution, as explained in this page, is to change the container width (a little bit less than 100%) and increase the column width.

[andrespazsoldan]

Obnoxious issue... did anyone find a workaround?

[desandro]

There's the seamless Masonry via Beyoncé's tumblr solution

[andrespazsoldan]

See here: https://codepen.io/desandro/pen/myBxD

This still shows issues. Some images overlap others by 1 pixel.

[hasinhayder]

I have found a nice fix for this issue. Works 100% in all browsers. I will push it tonight :)

[tiagogon]

@hasinhayder where is the fix? :)

[zamson]

@hasinhayder please share your fix. This is driving me nuts 😞

[hasinhayder]

@tonytone999, @zamson @tiagogon - the problem occurs because of using parseInt() in several places where it should actually be parseFloat()

if you are using the masonry.pkgd.js or masonry.pkgd.min.js or packery.pkgd.js or packery.pkgd.min.js packaged version (minified or not minified), the quickest fix is to open your js file and replace all parseInt with parseFloat. Nothing will break and your problem will be fixed right away.

[zamson]

@hasinhayder it's working! how come this is not updated in the plugin? any drawbacks?

[hasinhayder]

@zamson no drawbacks buddy :)

[desandro]

Outlayer v2.1.1 was released last year, which uses float values. I'll be updating Masonry with this change in its next release.

[hasinhayder]

@desandro good to see that it's finally happening. Please also update packery as well :)

[andrespazsoldan]

I managed to solve it by adding specific selectors to some containers that overlap or miss 1 pixel due to calculation error. Sometimes I had to use browser specific selectors (media queries that target specific browsers). Good to know it's solved. @desandro you rock, man, awesome work.

[desandro]

Outlayer v2.1.1 has been added to masonry.pkgd.js in Masonry v4.2.2