HTML5 Masonry Margin / Gutter Issue when using fixed Sidebar (EDGE & Firefox)

问题

I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine.

This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to correctly calculate the positions. However sadly this is the case and I think it may be related to my sidebar menu.

JSFiddle

Using jQuery(window).load(function(){ does not seem to resolve the issue. Adding the position fixed to the right side container does fix the issue but breaks the scroll and prefer not to use this method if it can be avoided.

I've take the time to add this project to a JSFiddle to help diagnoses this issue.

Dev Site
JsFiddle

Screenshot of Issue

HTML

Unrelated full code can be reviewed on the JsFiddle or my Dev Site.

<div class="amino-wrapper">
    <div class="amino-wrapper-left"><!-- SIDE BAR --></div>
    <main class="amino-wrapper-right">
        <div class="grid">
            <div class="grid-sizer"></div>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
        </div>
    </main>
</div>

CSS

Unrelated full code can be reviewed on the JsFiddle or my Dev Site.

img {
  max-width: 100%;
  height: auto;
}

.amino-wrapper {
    height: 100%;
    width: 100%;
}

.amino-wrapper-left {
    background-color: #1c1c1c;
    border-right: 1px solid #eee;
    color: #eee;
    height: 100%;
    left: 0;
    padding: 4rem 2rem;
    position: fixed;
    top: 0;
    width: 300px;
}

.amino-wrapper-right {
    margin-left: 300px;
    overflow-x: hidden;
    position: relative;
    top: 0;
    width: calc(100% - 300px);
}
.amino-wrapper-left header {
    left: 0;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    text-align: center;
}
.grid-sizer, .grid-item  {
  width: calc(100% / 3);
  width: 33.33%
}

.grid {
  overflow: hidden;
}

JavaScript

jQuery(window).load(function() {
    jQuery('.grid').masonry({
        // set itemSelector so .grid-sizer is not used in layout
        itemSelector: '.grid-item',
        // use element for option
        columnWidth: '.grid-sizer',
        gutter: 0,
        percentPosition: true
    })
});