Image block with link set shows a bottom border in the middle of the image

[inaikem]

Quick summary

When adding a link to a normal Image block, the block will render a line behind the image.

The line is a CSS bottom border set on the image's container A tag. See the screenshot below:

Steps to reproduce

1. Add an image block to a post/page.
2. Add a link to the image.
3. Preview/publish the post/page.

What you expected to happen

• A linked image should not have a visible border.
• The A element should be the same height as its contents.

What actually happened

• A linked image has a visible border.

Context

User report: 4258389-zen

Operating System

Windows, macOS, Linux, Android, iOS

Browser

Google Chrome/Chromium

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, difficult to implement

Workaround details

We can remove the border via CSS on Atomic sites. There is no workaround for Simple sites.

[synora]

Triaged. Unless I missed something, I'm unable to replicate the horizontal line using the same theme (Blank Canvas):

[inaikem]

Unless I missed something, I'm unable to replicate the horizontal line using the same theme (Blank Canvas)

I should have covered that. Good catch! Try a logo that contains some transparency on the left and right sides. The bottom border on the A element appears behind the image. Here's the image I tested with:

[dpasque]

Tagging @Automattic/flow-patrol-create based on issue content

[synora]

@inaikem Bingo! It sounds like images with transparency of some sort maybe causing this issue. I tested again with your image versus my original image.

The logo in the user report seems to have some transparency as well.