coblocks
coblocks copied to clipboard
ISBAT use Masonry block and have consistent layout across browsers
Describe the bug:
It seems that Safari is displaying an inconsistent masonry layout compared to Chrome and Firefox. In the screenshots provided, we can see superfluous spacing that resides above the middle image.
To reproduce:
- Add Masonry block.
- Add images with varying heights (easier to see with more images).
- Publish and view the page in Safari.
Expected behavior:
Expect consistent Masonry layout in Chrome, Firefox, and Safari.
Screenshots:


Isolating the problem:
- [x] This bug happens with no other plugins activated
- [x] This bug happens with a default WordPress theme active
- [x] This bug happens without the Gutenberg plugin active
- [x] I can reproduce this bug consistently using the steps above
WordPress version:
5.9
Gutenberg version:
N/A
This CSS is a user-reported fix from WP.org. I was not able to achieve consistent results with just this.
.wp-block-coblocks-gallery-masonry .wp-block-image {
-webkit-margin-after: 0!important;
padding-bottom: 1em!important;
}
@-moz-document url-prefix() {
.wp-block-coblocks-gallery-masonry .wp-block-image {
padding-bottom: 0!important;
}
}