Okay so I realize this is a pretty extreme edge case, but this is a problem nevertheless... Let me try to explain.

I'm opening an issue here even though my problem is with Masonry -- I've tracked it back to this dependency.

What's the problem?
You cannot load Masonry directly into an iframe in Firefox (I'm using latest version at this time v31), but yes it works just fine in Chrome.

Okay why does it fail?

During this function https://github.com/desandro/get-size/blob/master/get-size.js#L93 you create a random div and run some tests against this. The problem is the getStyle function will return null. Even though the global window.getComputedStyle is available, it will simply return null. Once style returns null it immediately errors out on the next line, since you cannot call style.width on a null value.

I'm not sure how to fix this, I'd have to dig into why loading directly into an iframe causes getComputedStyle to return null - but it does.

However, I was able to work around this in my case by simple loading Masonry in the parent window, and then referencing it into the iframe by simply writing window.Masonry = parent.Masonry within the iframe. This ends up achieving the result I'm going for, but it's a hacky work-a-round for not being able to load it naturally into an iframe.

This only occurs on Windows when a custom scale for the display is set in the operating system. For example 140%, instead of the default 100,125,150, etc.. recommended choices Windows gives you.

When using a custom scale, style.width will not be set to a round 200 pixels, but instead is something like 199.993px, causing this line to always be false when it should be true:

getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;

I fixed it in my project with a simple Math.round(), I'd imagine that's probably a safe fix for all scenarios.

In ie8 get-size raises an error when it loads because noop is not defined.

The getSize function returns the wrong values in IE11 when the page is just opened (not refreshed).
After a refresh (F5) it does return the right width.

I've narrowed it down to the following problem:

On line 95, the variable isBoxSizeOuter is set:
isBoxSizeOuter = getStyleSize( style.width ) === 200;
On IE11 this value seems to randomly 'jump' between true and false.

Inserting the following line, seems to fix it:
if (!!navigator.userAgent.match(/Trident.*rv[ :]*11\./)) isBoxSizeOuter = false;

Hi @desandro:

Your copyright notice and the MIT license text are not contained on GitHub but on a separate MIT license page (http://desandro.mit-license.org/). This actually poses a problem for automated FOSS compliance processes. While code scanners will pick up on the string 'MIT' in the README.md, your copyright notice will be systematically missed.

Would you please consider changing your license information so that your code can be more easily used in compliance with the license? A good method for declaring copyright and licensing is https://reuse.software.

Hello,

I'm trying to use Masonry on IE8 but I have the following error:

'getComputedStyle' is undefined in the mungeNonPixel function.

This error led me to this repository.

The following code is my hotfix to this issue:

if ( window.getComputedStyle || value.indexOf('%') === -1 ) {
    return value;
}

We use your masonry lib and have some problems with styling it right after first init.

When we init masonry and there are no elements, which came async from angular service the web components are added in a second moment when data came from server.

The problem is that it is not styled well because in this lib this is not right

size.width = elem.offsetWidth;
size.height = elem.offsetHeight;

The width which is a calculated width for 33% or 50% or so on, but the height is coming from an inner component which it seems it is not present at the moment when getSize is called.

I think the problem could be, that the components are lazy loaded components and so the height could be dynamic and not right at the moment masonry.layout() do the work.

So not sure if this could be a bug, but is there a solution for a workaround for it?

Thx a lot

MooTools implements a version of window.getSize that returns the window dimensions when passed no parameters. Loading this library after MooTools causes it to overwrite MooTool's implementation of window.getSize and any scripts that rely on it to fail.

From @desandro:

+1 this issue if you would like to see it resolved.

See http://codepen.io/desandro/details/ouKBh

in Chrome, returns 40, in IE8 & Others returns 10

jQuery returns 40px in both

Related to desandro/masonry#417