Open Bug 1554573 Opened 6 months ago Updated 17 days ago

Firefox's Input Spinners are WAY too small. Impossible to see or use. The up/down arrows look like dots.

Categories

(Core :: Layout: Form Controls, defect, P3)

67 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: postandreply, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: parity-chrome)

Attachments

(2 files)

Attached image Latest Firefox.png

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

Steps to reproduce:

This happens in both Firefox 56.0.2 and Firefox 67, so probably everything in between. Even without userChrome.css, it happens. Just go to any website that has an input box with increase/decrease arrow buttons (or spinners). Just now, I went to https://www.humblebundle.com/games/tinybuild-bundle-2019 and scrolled to the bottom and clicked the button that said "custom amount". I wanted to use the up/down arrows, but they were so tiny they looked like dots. This happens at all page zoom levels. 100%. Lower. Higher. It doesn't matter. Just a quick search online gave me results like this https://stackoverflow.com/questions/39384042/number-input-type-too-small and this. Also, my bug report might be related to https://bugzilla.mozilla.org/show_bug.cgi?id=947365 and https://bugzilla.mozilla.org/show_bug.cgi?id=1024078 But both of those bug reports are 5-6 years old. Are you seriously telling me you couldn't fix the appearance of input spinners during all of that time? I included a screenshot of how atrocious they look in Firefox. And another screenshot of how it looks in Google Chrome. The difference is like night and day. One, you can't see ANYTHING at all. Just looks like a speck of dirt. The other, you can clearly see the arrows. It won't let me submit two screenshots, so I'll just submit the Firefox 67 one first.

And this is how it looks in Chrome (why isn't there an attach image button? oh well, guess I'll use an imgur link).
https://i.imgur.com/ji7SjVk.png

Test (for future reference). Trying to make the Chrome screenshot appear without having to click a link.
[img]https://i.imgur.com/ji7SjVk.png[/img]
<img src="https://i.imgur.com/ji7SjVk.png">

For some reason, it didn't post a link that I posted earlier. I wanted to give a second example of people complaining about the tiny, practically invisible input spinners. https://github.com/Elgg/Elgg/issues/10288 Hopefully, the link will work this time.

(In reply to gaveitatry from comment #1)

why isn't there an attach image button?

It's the other way around: when you click the Attach File link above the description, you can submit a comment along with the uploaded file.

Blocks: 945309
Component: Untriaged → Layout: Form Controls
Keywords: parity-chrome
Product: Firefox → Core

I think this is a duplicate of 947365, really. gaveitatry, are the attached screenshots from a high-DPI (display density) device? The other issue includes a comment from one of the developers that "the current implementation seems completely broken" on high-DPI devices. (That was 5 years ago, with no real movement since then, so uh, I'm not holding my breath for a fix.)

Flags: needinfo?(postandreply)

It's the other way around: when you click the Attach File link above the description, you can submit a comment along with the uploaded file.

No. I mean on the original post, I am allowed to attach one file and only one file (with a description for that one file). And then if I reply to my original post, there is NO option to attach a file. I had to use URL links in the reply.

are the attached screenshots from a high-DPI (display density) device?

I'm not 100% sure what you mean by a high-DPI device. I have a 15.6" screen laptop. By default, it comes with a 1920x1080 resolution. For the last year, I have been using 1366x768 resolution. Yesterday, or the day before, I switched to 1600x900 resolution. Just now, I tested all three resolutions. The results are the same in all of them.

I just want to add that this is a Firefox issue. Google Chrome doesn't have this problem. I haven't tested Internet Explorer or Microsoft Edge because the only browsers I use are Firefox and Google Chrome. And I already mentioned this, but I tested this out in both Firefox 56.0.2 and Firefox 67. And it was the same in both cases.

I don't think this is a matter of high-DPI or low-DPI. I think this is a matter of Firefox simply not displaying input spinners the same way other browsers do, which causes this "you can't see it because it is too small" problem.

Flags: needinfo?(postandreply)

Oh, nevermind. I think that I see an "attach file" link that has nothing to do with original posts and replies to the original post. I'm going to test it now.

Attached image Latest Chrome.png

One more bit of information. I tried using the Inspector (F12 in Quantum) to edit the input element. I tried various things like line-height, height, min-height, and even scale. When I used a tranform:scale(3), it made everything big EXCEPT the spinners. So I don't think that this is something that I can fix with user scripts or userChrome.css. If you know a way that I can fix it with userChrome.css or user scripts, than that would be wonderful. I don't mind using bandaids. Any ideas of what CSS code that I can use to fix this?

To clarify, because the wording in 947365 might not be totally clear, there are a couple of issues with the way Firefox renders the spinner buttons. One of them is specific to higher-density displays (for example, this laptop is also 15" but has a 4k panel, so the pixels are denser). The rest of the UI, like the text and the outline around the input box, are scaled up to occupy more pixels in order to retain the desired size in inches/mm/whatever. But due to a known error, the size of the arrows themselves doesn't scale to match.

That specific issue wouldn't cause your problem because you don't have a high-DPI display -- 1080p at 15" should look good with no scaling applied -- which means it must be something else. I believe some other causes are mentioned on #947365 as well, so this issue might still qualify as a duplicate.

Re: your comment about fixing it, some browsers expose pseudo-element selectors to style portions of elements, but I believe Firefox is on record as opposing those features. For example, look at https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button -- Firefox doesn't support this on any version. Unfortunately that probably means you can't fix this yourself. (Maybe they'd take a patch, though?)

Yeah, I tried that exact same pseudo-element earlier in my userChrome.css, but it didn't work. If Mozilla decides to do a patch to allow the pseudo-elements, a small portion of the Firefox users will take advantage of it and that's better than EVERYONE being stuck with the tiny arrows. Yeah, I guess I don't have high-DPI then. I don't even use the 1080p resolution. I lowered it to 1600p. Also, in case anyone finds this bug report, you can hide the input spinners altogether using this (but I don't want to hide them. I just want to make them visible):

input[type=number] {
-moz-appearance:textfield;
}

The priority flag is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(dholbert)
Flags: needinfo?(dholbert)
Priority: -- → P3

One note here that may help understanding why only some people see this: Firefox's form controls generally try to use the system's form control appearance, that is, using the same controls that are used in other Windows applications. (The API for drawing them into our own graphical buffers is somewhat different, though, but Windows and other OSes offer APIs to do this.) So we have code (involving -moz-appearance: spinner-upbutton and -moz-appearance: spinner-downbutton) to try to render what your operating system thinks these controls look like. Presumably that code works for most other form controls, but somehow it's failing in this case.

(Chrome, on the other hand, has its own form controls and doesn't try to match the system it's running on.)

At least on Windows, the operating system's form controls do not support rounded corners. So operating system's L&F would not be helpful.

It's been five months. Any possible fixes yet?

You need to log in before you can comment on or make changes to this bug.