bluearchive-calculator.com - Unable to see the values in the input boxes

[Qoooo]

URL: https://bluearchive-calculator.com

Browser / Version: Firefox 88.0 Operating System: Windows 10 Tested Another Browser: Yes Edge

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: On the main page, just select any character and click on the button at the end of the page.

Now it will display 2 rows of inputs. The inputs using input type="number" will display a input box with a up/down buttons right in the middle, making it hard to see the values in the input box.

On the Microsoft Edge, the input box is rendered without the up/down buttons, allowing user to see the value.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Affected area:

<td class="inputTd">
  <input type="number" name="input" maxlength="2" ,="" max="75" min="1" required="required" value="1">
</td>

Note: The issue is not reproducible on Chrome.

Tested with: Browser / Version: Firefox Nightly 98.0a1 (2022-01-16) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[qa_03/2022]

[denschub]

This is unfortunate. They're using <input type="number"> here, and probably didn't expect non-Chrome browsers to have a different UI for this...

There is a Firefox bug on file that suggest hiding the buttons if the input field is too narrow, which would solve this. However, the site could also address this by specifying they want this field to be rendered as a text field, for example with

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

which would make sure that this is consistent in all browsers. Their twitter profile has open DMs, I'll send them a message and let them know.