Page MenuHomePhabricator

[Firefox only] Vector 2022: blue border appears around links and images clicks
Open, HighPublicBUG REPORT

Description

Steps to replicate the issue:

  • Using Firefox...
  • go to the Italian Wikipedia and open this article
  • click on the image within the Infobox, but don't lift your finger from the mouse button

What happens?:

  • the blue border of the "image as a link" doesn't fit the image when clicked

What should have happened instead?:
*the blue border should match the border of the image, or not be shown at all

Software version:
Firefox version 126.0 (64 bit), Windows 10 Home, screen resolution 2560x1440

Other information:

Dendrobium polyanthum - Wikipedia – Mozilla Firefox 21_06_2024 11_44_36.png (989×1 px, 332 KB)

Also happens on links:

image.png (867×1 px, 389 KB)

More examples:

WhereFirefoxChromiumNotes
Wikipedia:Community portal
Firefox English Wikipedia VPT image click glitch 20240622.png (204×175 px, 9 KB)
Chromium English Wikipedia VPT image click glitch 20240622.png (264×188 px, 11 KB)
File:Example.jpg
Firefox Commons Example.jpg image click glitch 20240622.png (444×495 px, 52 KB)
Chromium Commons Example.jpg image click glitch 20240622.png (387×348 px, 46 KB)
Lynx image at Template:In the news
Firefox lynx in the news image click glitch 20240622.png (283×302 px, 56 KB)
Chromium lynx in the news image click glitch 20240622.png (223×259 px, 50 KB)
For Chromium, only the bottom border is highlighted

Event Timeline

Jdlrobson renamed this task from Vector 2022: the blue border doesn't match the image when clicked to [Firefox only] Vector 2022: the blue border doesn't match the image when clicked.Fri, Jun 21, 6:21 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson subscribed.

I cannot replicate this issue in Chrome but can in Firefox:

Screenshot 2024-06-21 at 10.19.15 AM.png (932×2 px, 808 KB)

Looks like links inside figures need to be display block.

This is a Firefox issue that goes back years. The blue box showing the focus is typically as wide as the image, but its height corresponds to one line of text. Setting the style declaration display:block; on the <img /> element works to make the blue box the same height as the image, and might be better than putting it on the a element, since some of the a elements might enclose text - for example, inside the thumb caption.

Jdlrobson renamed this task from [Firefox only] Vector 2022: the blue border doesn't match the image when clicked to [Firefox only] Vector 2022: blue border appears around links and images clicks.Tue, Jun 25, 5:03 PM

Also happens on links:

image.png (867×1 px, 389 KB)

What does this have to do with the issue in question? And what even is supposed to be wrong with it?

ETA: It looks like only on Vector 2022, the outline appears even when clicked by mouse, not just when focused by Tab. But that still seems a totally different issue from this task.

Also happens on links:

image.png (867×1 px, 389 KB)

What does this have to do with the issue in question? And what even is supposed to be wrong with it?

Agreed, I think the task should clarify if the issue is the presence of a blue border at all or the size of the border on Firefox. I'm assuming it's mostly the latter, because that would be broken on focus and on click.

Also happens on links:

image.png (867×1 px, 389 KB)

What does this have to do with the issue in question? And what even is supposed to be wrong with it?

Agreed, I think the task should clarify if the issue is the presence of a blue border at all or the size of the border on Firefox. I'm assuming it's mostly the latter, because that would be broken on focus and on click.

The border is new, so, yes this is what we (the web team) are trying to understand.

The border is being applied by the Codex mixin .cdx-mixin-link-base so will likely need an update in Codex once we've reached that decision (either to remove it altogether or to better apply it in the case of img tags inside links).

@Jdlrobson do you know which task/patch introduced this change?

@CCiufo-WMF according to git blame it was cd44419c95c5f515865b89ce31b454c6c3e912f7 where Vector 2022 switched to cdx-mixin-link-base

Okay, and that was done to support dark mode as part of T366515. DST will take a look.