IE (9, 10, 11) grid doesn't stack the same as with Chrome/Safari/FF/Opera

[thewatts]

I'm building a grid that has to be very specific, and it has very specific sizes. Because of this, we are specifically ordering each tile of the grid so that it fills in accordingly (and doesn't leave gaps).

Isotope has been great for this, and has worked very very well.

However, when it comes to how Isotope interacts with Internet Explorer - the grid doesn't shape up the same way that it does the rest of the browsers.

Unfortunately, this proves to be a huge problem - as it prevents the grid from being predictable - and therefore breaks the visual element of the page.

I've created an example of what I mean.
Here is an example with padding in the scss for tile elements: http://codepen.io/thewatts/full/oBfvu

And here is an example without padding in the scss for tile elements: http://codepen.io/thewatts/full/Cvabl

And here is a gist of the scss being used in both examples:
https://gist.github.com/thewatts/3c6d71e6e67100cd2f36

If you look at the way the widths/heights are being calculated - I'm using the calc() method.

I thought at first it was because of how the different browsers can calculate the values.
However, this isn't the case - as I also tried an example where I hand coded the pixels to add up to the correct ratios - and still there are issues.

Here are screenshots of the grid working correctly on Chrome:

With Padding

Without Padding

Here are screenshots of the grid breaking in IE:

With Padding

Without Padding

Thanks for your help, and for a super legit library!

[desandro]

Hi there! I took a look at it appears this issue occurs outside of Packery. Take a look at how the tiles stack with just float: left http://codepen.io/desandro/full/hracm. You'll see that the 400 x 400 tile doesn't fit in that top row.

[thewatts]

Hey @desandro! Thanks for your quick response!
It looks like when IE is calculating the widths, they are off by 0.01 pixel (what a pain!).

Thanks for your help!

[thewatts]

Hey @desandro - so I did some more plugging around, and when I hand code the widths to be correct (they line up when floated) - they still don't line up with Isotope.

Here's the example:
http://codepen.io/thewatts/full/yqzkB

( If you comment out the JS code, you can see that the blocks now line up when floated, but with Isotope enabled - they fall back to the issue from before )

[thewatts]

@desandro --- On a side note, I hadn't heard of Packery until you mentioned it this morning.

I checked out the site, and noticed this example:

Would Packery be a better fit for what we're trying to accomplish?

[desandro]

Perhaps! See Difference between Masonry, Packery, and Isotope

[desandro]

Closing this issue as it's been quiet for over an year 👻