Masonry works well in other browsers except Firefox. In Firefox, it distributes images incorrectly, leaving large columns of white space unfilled.
In Firefox 34.0.5:

Correct behavior in Chrome:

Here is the relevant Masonry code: https://github.com/codeforboston/bostongreenmap/blob/master/client/js/app.js#L354-L360
Here is the relevant CSS code:
https://github.com/codeforboston/bostongreenmap/blob/master/client/scss/_results.scss
Relevant Handlebars template:
https://github.com/codeforboston/bostongreenmap/blob/master/client/templates/resultItem.hbs
And Masonry docs: http://masonry.desandro.com/
We need Firefox to place the images as they are placed in Chrome and other browsers. Any thoughts on what is causing this?
Here is some possibly related discussion: desandro/masonry#166 (comment)
This issue concerns percentage widths, so it doesn't seem relevant.
Masonry works well in other browsers except Firefox. In Firefox, it distributes images incorrectly, leaving large columns of white space unfilled.
In Firefox 34.0.5:

Correct behavior in Chrome:

Here is the relevant Masonry code: https://github.com/codeforboston/bostongreenmap/blob/master/client/js/app.js#L354-L360
Here is the relevant CSS code:
https://github.com/codeforboston/bostongreenmap/blob/master/client/scss/_results.scss
Relevant Handlebars template:
https://github.com/codeforboston/bostongreenmap/blob/master/client/templates/resultItem.hbs
And Masonry docs: http://masonry.desandro.com/
We need Firefox to place the images as they are placed in Chrome and other browsers. Any thoughts on what is causing this?
Here is some possibly related discussion: desandro/masonry#166 (comment)
This issue concerns percentage widths, so it doesn't seem relevant.