Bug 115510 – Disabled textarea with transparent background-color does not render certain grey tones (foreground color) correctly

• Status: NEW
• Component: CSS

[Jens Nehlmeier]

Created attachment 200306 [details]
Textarea with wrong rendered foreground color

The summary pretty much speaks for itself.

If you do not specify a foreground color for disabled textareas, Webkit will lighten up the current foreground color to visualize the disabled status. 

Adding "background-color:transparent" to such a disabled textarea alters the behavior for certain grey tones. For example "color: #55555;" works as expected but "color: #A0A0A0"  results in nearly white text to be rendered instead of a light grey tone.

So with "background-color:transparent" WebKit does some wrong color calculations during rendering.

I have attached a demo that illustrates the problem. It contains a set of 4 textareas with different foreground colors. This set is repeated 4 times (enabled/disabled with and without background-color:transparent) and in the last set the last two textareas behave wrong (color is too bright).

Discovered using Safari on Mac OS 10.7 & 10.8, as well as Webkit Nightly for Mac.

[Radar WebKit Bug Importer]

<rdar://problem/13795885>

[Craig Kovatch]

Interesting workaround for this -- WebKit interprets `transparent` as `rgba(0,0,0,0)`. If you set background-color to `rgba(255,255,255,0)` instead of `transparent`, results are as-expected.

[Craig Kovatch]

This bug is also present on <input> elements

[Ahmad Saleem]

Created attachment 462736 [details]
Safari 16 display some disabled textarea different from other browsers

As can be seen from attached, Safari 16 do differ in disabled textarea and in few cases, in background-color: transparent as well.

We should align with other browsers and make it better. Thanks!

[Ahmad Saleem]

Chrome has following in UA Stylesheet for disabled:

textarea:disabled {
  border-color: rgba(118, 118, 118, 0.3);

and

textarea:disabled {
    cursor: default;
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: -internal-light-dark(#545454, #aaaaaa);

[Karl Dubost]

Thanks Ahmad.
In terms of readability the case with transparent is pretty bad.

[Ahmad Saleem]

Created attachment 467088 [details]
STP174 vs Safari 16.5.1 vs Chrome Canary 117

@Karl - I think it is just duplicate of another bug you fixed to make 'disabled' textarea content more readable.