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

Status: RESOLVED DUPLICATE of bug 1577602

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

Description

[gaveitatry]

Attachment: 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.

Comment 1

[gaveitatry]

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

Comment 2

[gaveitatry]

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">

Comment 3

[gaveitatry]

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.

Comment 4

[Gingerbread Man]

(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.

Comment 5

[James B]

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.)

Comment 6

[gaveitatry]

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.

Comment 7

[gaveitatry]

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.

Comment 8

[gaveitatry]

Attachment: Latest Chrome.png

Comment 9

[gaveitatry]

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?

Comment 10

[James B]

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.

Comment 11

[James B]

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?)

Comment 12

[gaveitatry]

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;
}

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

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

For more information, please visit auto_nag documentation.

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.)

Comment 15

[Masatoshi Kimura [:emk]]

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.

Comment 16

[gaveitatry]

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

Comment 17

[Emilio Cobos Álvarez (:emilio)]

Can you repro on latest nightly? I changed a bit the inner workings of <input type=number> in bug 981248. Though I couldn't repro your rendering... do you have a test-case?

Comment 18

[James B]

I used to have a Mozilla regression-finding application, that would go out and basically do a bisect search on nightly builds to see when a bug (or fix) showed up. I can't find it now, but I can say that my Firefox 72.0.1 stable seems better than the last time I looked at this, a year or more ago.

As a test case, just type the string data:text/html,<input type="number"> into the URL bar. If your spinners look like the OP -- 2-4 pixels tall, basically a single thick line -- then it's broken; if they show two individual buttons with visible up/down arrows, it's fixed.

Comment 19

[gaveitatry]

I am not going to bother doing repros on latest nightly. You can do that yourself. All I know is that I reported this bug 8 months ago, and only now is someone actually making a sincere effort to actually fix it instead of beat around the bush. But I did a repro for this other bug I reported 8 months ago (https://bugzilla.mozilla.org/show_bug.cgi?id=1552312) and you can see there has been ZERO progress on it even though I narrowed it down to which version of Firefox the problem first appeared in.

But what I will do is report back to you if there are any changes or improvements. The website that I took a screenshot of when I first created this bug 8 months ago no longer has spinners, so I can't use that website for comparison anymore. And I don't know any other websites with spinners off the top of my head. So what I did was use James B's approach of typing data:text/html,<input type="number"> in the URL bar. When I did that, it produced a blank page with one input box with spinners, and the spinners are no longer tiny dots that I can't see or click on. They are actually arrows. The arrows could be a tiny bit bigger (no padding below the top arrow or below the bottom arrow), but it looks like a big improvement.

I've included a picture of the spinners in Firefox 72.0.1, and one of the latest version of Google Chrome for comparison. Again, I don't know any websites off the top of my head that has spinners so I don't know if this has been improved/fixed for all spinners on all websites. But using James B's example, it SEEMS improved. And once again, it could be improved even more because there is still some padding above the top arrow and below the bottom arrow that doesn't need to be there. If that padding wasn't there, the arrows would be even bigger and easier to see and click on.

Pictures will be below this post.

Comment 20

[gaveitatry]

Attachment: Jan_15_2020_Firefox.png

Comment 21

[gaveitatry]

Attachment: Jan_15_2020_Google_Chrome.png

Comment 22

[gaveitatry]

Could possible be fixed.

I found this Bugzilla report (https://bugzilla.mozilla.org/show_bug.cgi?id=1287681) just now.

In the report, the reporter visited this website (https://www.qzdesign.co.uk/tests/spinner-test.php).

When he did, the spinners were super tiny and you could not see or click on the arrows (see his bug report for a screenshot).

Now, when I visited that same site, the arrows are big.

Even though this issue is practically fixed and a huge improvement from before, don't you think it can be improved even more? In both the website (https://www.qzdesign.co.uk/tests/spinner-test.php) and also by typing `data:text/html,<input type="number"> in the URL bar, you receive two spinner controls where there is some padding above the top arrow and padding below the bottom arrow. So if the spinner control is somewhat small (i.e. line-height:12px;), the arrows will be tiny when they could be made even bigger if there was no padding. Whatever the case, it is mostly fixed now (FINALLY), so thank you very much for working on this and making huge strides. I'm glad to see one of my two bug reports finally resolved, after 8 long months.

Comment 23

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 24

[Emilio Cobos Álvarez (:emilio)]

(In reply to gaveitatry from comment #19)

I am not going to bother doing repros on latest nightly. You can do that yourself.

Well, I could if I could reproduce the original issue. I could not, thus the question.

There's no need to be aggressive, just trying to help you know? :)

All I know is that I reported this bug 8 months ago, and only now is someone actually making a sincere effort to actually fix it instead of beat around the bush. But I did a repro for this other bug I reported 8 months ago (https://bugzilla.mozilla.org/show_bug.cgi?id=1552312) and you can see there has been ZERO progress on it even though I narrowed it down to which version of Firefox the problem first appeared in.

A version of Firefox includes thousands of changes. For bugs that are not reproducible, that's usually not quite enough.

But what I will do is report back to you if there are any changes or improvements. The website that I took a screenshot of when I first created this bug 8 months ago no longer has spinners, so I can't use that website for comparison anymore. And I don't know any other websites with spinners off the top of my head. So what I did was use James B's approach of typing data:text/html,<input type="number"> in the URL bar. When I did that, it produced a blank page with one input box with spinners, and the spinners are no longer tiny dots that I can't see or click on. They are actually arrows. The arrows could be a tiny bit bigger (no padding below the top arrow or below the bottom arrow), but it looks like a big improvement.

Ok, that's great. Looking at the changelog, it seems it may have been fixed by 1577602 if it's fixed in 72.

I've included a picture of the spinners in Firefox 72.0.1, and one of the latest version of Google Chrome for comparison. Again, I don't know any websites off the top of my head that has spinners so I don't know if this has been improved/fixed for all spinners on all websites. But using James B's example, it SEEMS improved. And once again, it could be improved even more because there is still some padding above the top arrow and below the bottom arrow that doesn't need to be there. If that padding wasn't there, the arrows would be even bigger and easier to see and click on.

Pictures will be below this post.