Masonry gallery behaving badly in webkit

  • I’ve used your masonry gallery, which works fine in firefox, but does not quite the same in webkit. In the gallery on the page I’ve provided a link to, the second image (landscape) is shown below the first (portrait) in webkit browsers.
    Also, its margin-bottom (and the border-bottom) is above the third image, which looks really nasty.
    For now I’ve countered it by setting the -webkit-margin-after on wp-block-image to zero, replacing it with a padding-bottom. For firefox I set this padding to zero, cos it’s doing what it’s supposed to.
    It looks like this hack works (on a Mac at least), but I can’t imagine this is what you intended this block would do.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Anthony Ledesma

    (@paranoia1906)

    Hi @stef-nikkel,

    I’ve attempted to replicate your report on the staging site provided using all the latest versions of Safari, Chrome, Firefox, and (unsupported) Internet Explorer. In all cases, I am seeing the same layout with these images where the portrait image does not have an image below. What browser are you using specifically and what version?

    Best,

    Anthony

    Thread Starter stef nikkel

    (@stef-nikkel)

    Hi Anthony,

    I’ve switched my hack off, so you can see how the masonry-thing doesn’t really work in webkit.

    This is the code I’ve used for that:

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

    Although that seems to work, the fact remains that without it’s not really a masonry layout.

    Cheers,

    Stef

    Plugin Author Anthony Ledesma

    (@paranoia1906)

    Hi @stef-nikkel,

    Thank you for taking the time to write such a descriptive report of the issue as well as sharing your CSS fix and re-creating the issue for me to see. I see the issue now. I suppose this issue is exacerbated when a variety of image sizes are present. Regardless we will take a look at this and see if we can get a fix in place.

    For reference, I attempted using the solution that you have here but I am still not able to achieve consistent masonry depending on image height.

    I have filed a bug report so our developers are made aware and can work to resolve this issue. The bug report can be found here:
    https://github.com/godaddy-wordpress/coblocks/issues/2265

    Best regards,

    Anthony

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Masonry gallery behaving badly in webkit’ is closed to new replies.