Masonry Gutter-Sizer Breaks Page

Question

Check this issue out on https://willhay.io/photography. So I am trying to have a margin-botttom of 1%, and a gutter of 1%. The margin-bottom works fine, but when I try to set the gutter to 1%, the images seem to disappear and only 2 images show up overlapping.

docReady( function() {
        var $grid = $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            gutter:  '.gutter-sizer',
            percentPosition: true
        }); 

        $grid.imagesLoaded().progress( function() {
                $grid.masonry('layout');
        });
});

Then the css for gutter-sizer is just

.gutter-sizer { width: 1%; }

I can't seem to figure out why the percentage gutter-sizer is not working. Any help would be greatly appreciated.

EDIT: It works fine when I do a regular gutter, but not when I try to do a percentage.

EDIT 2: When I inspect element with and without the percent gutter, the only difference I notice is that when it has a percent sized gutter, the divs gain some strange transition code when I inspect element. https://i.stack.imgur.com/SAHg4.png

EDIT 3: A percentage gutter works fine on https://willhay.io/masonry