wp-calypso icon indicating copy to clipboard operation
wp-calypso copied to clipboard

Published 20 hours ago • verified publisher icon Automattic

CoBlocks: Masonry images overlap on mobile when device is rotated

Open kaitohm opened this issue 4 years ago • 12 comments

Steps to reproduce

  1. On a Simple Site, create a post/page with Masonry Block, and add multiple images
  2. Open the page/post on mobile device
  3. Rotate device horizontally
  4. Rotate device back to vertical, and notice images are stacked.

What I expected

Images should be shown as they were before rotating the device.

What happened instead

Images are unnaturally stacked, overlapping with each other.

Screenshot / Video

By HC: https://d.pr/i/mqPIKO

I've also been able to reproduce this on my Simple test site. User site's theme: Mayland My site's theme: Exford

Context / Source

3208650-zen

kaitohm avatar Aug 10 '20 02:08 kaitohm

Also reported on another site: 3313816-zen

I was able to replicate in Chrome's responsive mode, but it was either sporadic, or subject to caching.

kristarella avatar Sep 14 '20 05:09 kristarella

  • This is related to this ticket: https://github.com/godaddy-wordpress/coblocks/issues/1658

kristarella avatar Sep 14 '20 05:09 kristarella

I also see this issue on 3459757-hc no matter the device orientation. Also commented on godaddy-wordpress/coblocks#1658

eduardozulian avatar Nov 05 '20 16:11 eduardozulian

Got a similar issue (3470982-zen), reproduced on iPhone 8, XS. iPhone 11, was ok. Also happening on Android: Samsung 20, Pixel 4.

❌ iPhone8 ❌ iPhone XS ✅ iPhone 11
masonry-atomic-i8 masonry-atomic-ix masonry-atomic-i11

formosattic avatar Nov 07 '20 08:11 formosattic

3670903-zen

paulostp avatar Jan 23 '21 10:01 paulostp

Seems to be a jQuery Masonry issue: https://github.com/godaddy-wordpress/coblocks/issues/1658#issuecomment-806173647

WunderBart avatar Apr 19 '21 13:04 WunderBart

3966802-zen

patrickmelville avatar May 06 '21 18:05 patrickmelville

4060606-zd-woothemes Android 9

I was also able to reproduce the issue by simulating the mobile view (Pixel 4) in Google Chrome on Desktop.

zdenys avatar Jun 17 '21 07:06 zdenys

Another report here: 28669812-hc

ccwalburn avatar Jun 20 '21 15:06 ccwalburn

Another report in 5529157-hc

happychait avatar Sep 05 '22 21:09 happychait

Support References

This comment is automatically generated. Please do not edit it.

  • [ ] 3208650-zen
  • [ ] 3313816-zen
  • [ ] 3470982-zen
  • [ ] 3670903-zen
  • [ ] 3966802-zen
  • [ ] 4060606-zen

github-actions[bot] avatar Sep 05 '22 21:09 github-actions[bot]

It looks like the most recent attempt to fix this was from June of this year. We're waiting on an external repo update.

youbrokesomething avatar Sep 22 '22 17:09 youbrokesomething