search

DrewDahlman / Mason

Mason.js for creating a perfect grid with jQuery.
http://masonjs.com/
MIT License
1.22k stars 184 forks source link

Filler items are slightly misaligned #46

Closed apresern closed 9 years ago

apresern commented 9 years ago

Firstly, awesome work with Mason, it's exactly what I've been looking for.

I've got a relatively large page of items, using a few different sizes and it needs to be fluid. One issue I'm having is that when I don't include a gutter, some of the filler items appear misaligned, either causing small gaps between them, or overlapping one another. It's slight, but noticeable.

It looks like some of the filler item properties are calculated as fractions (e.g. left: 810.68px) so I'm not sure if this has anything to do with it. Any ideas? Thanks!

mason-filler-alignment

DrewDahlman commented 9 years ago

Hmm. Do you happen to have a fiddle?

I think I know exactly what the issue is - depending on browser there are pixel rounding issues and I am doing my best to get them to round correctly, I did recently change the way this is being done so I bet that's an effect of that.

I will look at the rounding piece and see if we can get it sorted properly. If you have a fiddle I can use so I can ensure that it passes tests that would be great.

I have seen something similar to this when a grid is rather large which might be the case here.

apresern commented 9 years ago

It is a large grid with a lot of items. It's difficult to recreate exactly as items are being generated from a JS object, placed into a template and then shuffled so they appear in a random order (although I don't think that would have an effect?)

http://jsfiddle.net/phkom7d2/

That's with 20 items and you can start to see gaps appearing as you scroll down. They seem to become more pronounced towards the end of the grid when there's even more items.

DrewDahlman commented 9 years ago

Perfect! thanks for posting this.

Yep as I suspected the issue is pixel rounding. I think I have a solve for this and will mess around later today.

apresern commented 9 years ago

Great, thanks for getting round to it so quickly! Hope you're able to solve this.

DrewDahlman commented 9 years ago

This should now be resolved in version 2.0.2

apresern commented 9 years ago

Works perfectly now, thanks!