coblocks icon indicating copy to clipboard operation
coblocks copied to clipboard

ISBAT use Masonry block and have consistent layout across browsers

Open AnthonyLedesma opened this issue 4 years ago • 1 comments

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:

  1. Add Masonry block.
  2. Add images with varying heights (easier to see with more images).
  3. Publish and view the page in Safari.

Expected behavior:

Expect consistent Masonry layout in Chrome, Firefox, and Safari.

Screenshots:

image

image

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

AnthonyLedesma avatar Feb 04 '22 17:02 AnthonyLedesma

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;
	}
}

AnthonyLedesma avatar Feb 04 '22 17:02 AnthonyLedesma