Inputs are invisible (black on black) when changing colour settings

[selfthinker]

Upstream bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1335476
Date: 2017-01-31
Reported by: Anika Henke
Related to: alphagov/govuk_elements#397

---

Overview

Inputs are invisible (black on black) when changing colour settings.

Steps to reproduce

1. Open Firefox's Preferences > Content > Colours...
2. Choose a dark background and a light text colour (e.g. yellow on black is quite common)
3. Make sure "Use system colours" is not ticked
4. Change "Override the colours specified by the page with my selections above" to "Always"
5. Open http://jsbin.com/sibube. The last two examples in there have form elements (in this case text inputs and buttons) which have a background set (to anything but "transparent") and either a border set or unset ("border: none").

Actual results

The last two examples have completely invisible text as the combination of the styles results in black text on a black background.
Or rather, the text is always black and the background is transparent. And because the overall background is set to black, the transparent input background is black as well.

Expected results

Either the form elements should follow the user specified colours (yellow text on a black background. Or it should have fixed colours (e.g. black text on a white background).
The latter is how it used to be until Firefox 11 (the bug appeared in Firefox 12).

In any case, the two colours need to be set dependent of each other, either both colours should be flexible or fixed. Whenever a transparent background colour is used, the text colour mustn't be fixed.

Update April 2019

I've just rechecked this in Firefox 66 and two of the three invisible cases are now fixed. The only case left which is still producing an invisible input is the last one, i.e. for inputs having both a background colour and a border. The screenshot shows this.

On top of that, I also found that adding -moz-appearance: none or -webkit-appearance: none makes all invisible except the 1st and 4th, i.e. setting any background makes them invisible. Shall I report that as a new bug?

[36degrees]

@selfthinker It looks like this might be fixed – testing using http://jsbin.com/sibube in Firefox 84 all of the inputs display with black text on a white background.

[selfthinker]

Thanks @36degrees. I have just retested and found the same (on Windows as well as macOS). The example I found later which was not in the test case (with -webkit-appearance: none) was also fixed.

I left a comment on my original bug report. I don't know how to close it, though. So, best wait until someone from Mozilla confirms and closes it. And then we can close this one as well.

[selfthinker]

And someone has closed it now, I will move this.