search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

Image: Expand on click animates incorrectly when border is defined #63567

Open artemiomorales opened 4 months ago

artemiomorales commented 4 months ago

Description

Expected: When adding a border to an image, I expect Expand on Click to animate smoothly.

Actual: The animation appears broken.

First mentioned in this comment related to adding margin support to the image.

Step-by-step reproduction instructions

  1. Add an image to a post
  2. Give the image a border
  3. Enable expand on click
  4. Publish the post; click on the image and see that the animation is broken

It looks like custom aspect ratios also affect the animation in different ways (see video below).

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/07cae731-06d4-4978-9315-e2b2b27fcbca

https://github.com/user-attachments/assets/24801e65-0d54-4d13-b891-3cdf128cc029

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

kevin940726 commented 4 months ago

I think this is because of how the lightbox is implemented. When animating, the lightbox attaches an image at the original position, then scale up to fit the whole screen. Since borders and margins are all attached to the img element, scaling them up by the same percentage as the img size causes unexpected flickers.

For instance, scaling a 200x100 image with borders of 10px by two times the size will result in a 400x200 image with borders of 20px. In this case, it's scaling a scree-fitting image down to its original size.

I think we can argue whether borders (and paddings/margins) should be visible in the lightbox mode. If not, then we can probably just exclude them while zooming in. WDYT?

kevin940726 commented 4 months ago

I went ahead and added some ad-hoc code to demonstrate what I mean above:

https://github.com/user-attachments/assets/11c688ce-ef75-48df-994d-4cd970db1683

Notice that expanding removes the borders but keeps the radius. I think we need some design feedback on this part because I still feel weird about it 😅.

kevin940726 commented 4 months ago

I went ahead and added some ad-hoc code

I opened a draft PR for visibility: https://github.com/WordPress/gutenberg/pull/63892