Changing window size or zoom level collapses gutters

[dtgay]

Hey there, thanks for such a clean, simple library!

Platform

macOS 12.6, Brave Version 1.45.113 Chromium: 107.0.5304.62 (Official Build) (arm64)

Setup

• Parent div, set to relative, which I apply minimasonry to
• Child divs, set to absolute (have the following Tailwind classes applied: absolute flex flex-col justify-between p-4 shadow-md border-l-4 bg-gray-100 border-gray-500 rounded-sm tracking-widest leading-loose mb-4

new MiniMasonry({
      baseWidth: 512, // Target width of elements.
      container: this.element, // Container selector or HTMLElement. Required.
      gutter: 16, // Width / height of gutter between elements. Use gutterX / gutterY to set different values.
      surroundingGutter: false, // Set left gutter on first columns and right gutter on last.
});

Description

I'm experiencing an issue where gutters between items are reduced in size as the result of resizing the window/viewport. All of the following screenshots were taken on the same page load (no refresh):

Default page load:

After reducing window size:

After increasing window size (after being reduced):

Images of other viewport sizes:

This happens on zoom level change too, not just window resize. This is after reducing and increasing and reducing zoom level a bunch:

Manually calling a redraw after window resize doesn't seem to have any effect. Looking at the library, it seems like a redraw automatically happens on resize, anyway.

Is there anything I can do to alleviate this, even if it's a bit hacky?