Image: Expand on click animates incorrectly when border is defined

[artemiomorales]

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

lightbox-border-bug.mp4

lightbox-aspect-ratio-border.mp4

Environment info

• WordPress 6.6-rc3
• Gutenberg 18.8.0-rc.1

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

• Yes

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

• Yes

[kevin940726]

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]

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

Kapture.2024-07-24.at.01.09.48.mp4

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]

I went ahead and added some ad-hoc code

I opened a draft PR for visibility: #63892