[Resolved] Masonry View has weird gaps

[Author]

Posts

[sietseR]

I am trying to:
I made a View with Masonry Loop Style, but in the forntend it gives very mixed results with the gap between the items. Most of the time it's perfect, sometimes it scrambles the items. Sometimes only the top ones, sometimes only the top left and sometimes even all of them. Sometimes the gap is smaller, sometimes it's larger and sometimes items completely overlap.

When I use the Grid layout, everything works fine, but I like the maasonry better.

Link to a page where the issue can be seen:
hidden link

[Shane]

Hi Sieste,

Thank you for getting in touch.

I've tried to replicate the issue but with multiple refreshes of the same window size and the grid displays as intendended.

Can you let me know exactly how you're replicating the issue ?

Thanks,
Shane

[sietseR]

The easiest way is by using the developer console. When you drag that window to make the page smaller or bigger, you see the elements shifting. And when I close the developer console it goes wrong most of the time.

But that's the strangest part, I don't know how to replicate it. It almost seems that the first time you visit the page is all goes well and when you revisit it, it goes wrong. It doesn't seem to happen in Firefox, but it does in Chrome and Edge.

[Shane]

Hi Sieste,

This problem seems to be unique to your site only.

Can you attempt to view the page below and let me know if you're able to replicate the issue.
hidden link

Thanks,
Shane

[sietseR]

I think I found out what the problem is. I have the padding of the masonry-blocks set to a dynamic width (VW) instead of fixed in pixels. When I set it to pixels it works perfectly.

So it breaks with resizing the viewwidth. That's the case. And now I have to think if I want to keep it in VW or PX.