1656491 - Random wider border of INPUT element displayed

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Michael Hohner]

Attachment: correct border rendering

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

INPUT elements of type text are displayed with a wider, grey border than is specified in the corresponding style sheet. The CSS inspector shows a calculated border width of 1 px.

This happens only with INPUT elements having the focus, and it appears to happen randomly. When reloading the page most of the time the element is again rendered with the correct border, but sometimes again with the wider, grey border. This happens on various web pages. I've not been able to find a way to confidently reproduce the problem, it seems to be random.

This started with FF 78 and is also present in FF 79.

I've attached two screenshots (of https://wsc.nmbe.ch/bibliography, but the problem is not limited to this page), one showing the normal border, one showing the wider border.

Comment 1

[Michael Hohner]

Attachment: incorrect border rendering

Comment 2

[Michael Hohner]

Just after writing this, I found a way to reproduce the issue: Set focus to one INPUT element, then TAB to the next INPUT element. From this point on all INPUT elements with the focus are rendered with the wrong border until you reload the page.

Comment 3

[Peter Magyari (Desktop QA)]

Hi Michael,

I was able to reproduce the issue on Firefox 79 and Firefox Nightly 81.0a1.

I've ran Mozregression but it stopped early so the closest I got to pinpointing the bug that introduced this is:

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=1fa1d4f4b0e247804927d474cfecdf6c6f185203&tochange=27e254e8a57504c284959b209eac538a35871b3c

I'm going to set a component in order to involve the development team in reviewing the issue.

Thank you for reporting!

Comment 4

[Sean Voisen (:svoisen)]

Hi Michael — Thanks for reporting. I'm not sure this is a regression; the dark outline you are seeing seems to be the focus outline, which is intentional. Can you explain the "random" part of the behavior you are seeing? Trying to reproduce this on macOS I see the normal blue focus outline whenever I focus any of the input elements on the provided page. (On your system the focus outline may be styled grey.) The behavior doesn't appear to be random, and on different sites authors may control the style of the outline using the :focus styles.

Comment 5

[Michael Hohner]

Before FF 78 there was no such border by default. Also, this border does not appear when you give the INPUT element the focus using the mouse. It only appears after you switch between INPUT elements with the TAB key. In addition, even when using a :focus style, this border is added to the one specified in the style sheet (see the two attached screenshots).

It's not random, I just did not know how to reproduce the problem.

Comment 6

[Sean Voisen (:svoisen)]

Emilio: This would have been changed by bug 1311444. Can you comment?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Yeah, so, that's the focus outline, as comment 4 says. That bug intentionally makes outlines show up for author-styled inputs, which before that we weren't showing at all.

It only appears after you switch between INPUT elements with the TAB key.

Yeah, that's the classic Windows and GTK outline behavior, so that's expected.

In addition, even when using a :focus style, this border is added to the one specified in the style sheet (see the two attached screenshots).

This is not a border, it's an outline, you can suppress it with outline: none if you're providing your own focus styles.

Now the other interesting thing is why the focus outline doesn't look the same in other browsers like chrome. It seems Chrome does something very weird for "auto" outlines but not "normal" outlines, see:

data:text/html,<input style="border: 2px solid red;"><br><br><input style="border: 2px solid red; outline: 1px solid black;">

In particular, chrome paints that outline over the border (equivalent to having outline-offset: -1px) and clips the border of the input to the outline radius (this bit is a bit bizarre).

So I think in this case the page should just suppress the outline as it's providing its own focus styles. We could make auto outlines have a -1px offset too and in that page would cause the border of the input to seem black. But that seems wrong if the border of the input is already black...

Comment 8

[Sean Voisen (:svoisen)]

Michael: Does comment 7 help you? Are you the owner of the site in question?

I'm going to resolve this but feel free to reopen if there is further issue not explained in comment 7.

Comment 9

[Michael Hohner]

The example above is not from my site. I bet a lot of site owners will be surprised by the change of how inputs look now.

I wonder what's the point of this change. If the point is to highlight inputs that have the focus, then why does this start only after you've used the keyboard, and not when you've just used the mouse? And why does it look different on different platforms? For example, on Android it's different again (and even worse).