IE 11 doesn't render masonry js properly

Question

Latest Update:

This got fixed in the new masonry version.

Original Post:

I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).

I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.

I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.

The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.

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

Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html

It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.

Here a screenshot of how it should look from Chrome:

Working Masonry example from Chrome

And here a screenshot of how it looks for me in IE11:

Broken Masonry example from IE11

Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?

Can you create a reduced example? I work on the IE team and would be happy to investigate further. — Sampson, Oct 25 '14 at 17:37
@JonathanSampson I've updated my question with the working example and more information — peter, Oct 26 '14 at 15:26
Please see [my comments](http://stackoverflow.com/a/26592550/54680) below. — Sampson, Oct 27 '14 at 16:58

score 3 · Answer 1 · answered Oct 27 '14 at 16:46

After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.

Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.

peter · Accepted Answer · 2015-02-20T20:46:01.203

0

The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.

Update:

This got fixed in the newer masonry version

edited Feb 20 '15 at 20:46

answered Oct 26 '14 at 00:04

peter

14,348
9
62
96

IE 11 doesn't render masonry js properly

2 Answers2