IE 11 does not provide correct js masonry

Last update:

This has been fixed in the new masonry version.

Original post:

I have an AngularJS site with Bootstrap3 styling that works great in Chrome, Safari and Firefox, but not IE (and I thought those days would be over).

I am using Masonry -plugin to display some snippets. The first time I open the page, IE11 glues the tiles together. I believe this is due to some padding issue in bootstrap. When trying to debug the application or just display the contents of a variable to console.log everything works fine. Also after reloading the page everything is displayed as expected, this is only valid the first time the page is accessed.

I noticed that the Masonry site and examples work with IE, so I'm trying to figure out what is different.

The above issues also occur in IE10 - I don't have any information about IE9 and we have no intention of supporting IE8 or earlier.

Update: I noticed that the masonry site doesn't use paddings (like bootstrap), but margins instead, and indeed when I remove the paddings and add margins it works. However, the question remains: why doesn't it work with shims?

Update 2: I have a working test that shows an error. It's quite extensive and available here: http://server.grman.at/ie11-intro.html

This shows that the problem only occurs in IE if some script (probably a masonry library) is preloaded on the page before and after use.

Here's a screenshot of how it should look from Chrome:

And here's a screenshot of how it looks in IE11:

Last update: Yes, this is a freemasonry script, I created a second input page: http://server.grman.at/ie11-intro2.html which doesn't preload the clutch script and it works, now the question is WHY?