Issues with the masonry grid

The masonry grid seems to have become a bit glitchy recently. When you resize the window the elements overlap and don’t maintain the masonry grid. I disabled all the other CSS on my site and recorded this an example:

Some users are also reporting that the thumbnails are being squished where they are not maintaining the aspect ratio. I’ts a bit hard to tell, but many of these images are not displaying properly:

5 Likes

Thanks for reporting this! it appears to be an issue specific to Safari… we had some feature detection in the CSS for a browser-native masonry mode, and despite Safari not having this, it seems to think it does and it causes layout issues.

I’ve added some fixes here: FIX: remove CSS masonry @supports due to Safari issues by awesomerobot · Pull Request #28 · discourse/discourse-topic-thumbnails · GitHub

So updating the component should solve the overlap issues, and possibly the size issues as well (though let us know if those still persist)

6 Likes

That seems to have fixed both issues, thank you for the super quick fix Kris!

6 Likes