[textfield] textarea handle not properly themed for dark theme on firefox

[rebootl]

Bug report

On firefox the textarea handle is not properly themed when a dark background is used.

Maybe I'm missing a mixin or something?

Demo:

https://codepen.io/rebootl/pen/ZEpdpJx

Thx.

Screenshots

Your Environment:

Browser: firefox (latest)
OS: Arch Linux/Linux

[asyncLiz]

Unfortunately on some older versions of Firefox and some Linux distributions, the resize handle still uses the previous non-transparent image instead of a transparent one, resulting in this effect. I'd recommend checking to see if there are any updates to Firefox or your OS to see if that resolves the issue.

Here is the original bug from Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=554810

On other Linux distributions, OS X, and Windows, the resize handle is transparent (similar to Chrome).

[rebootl]

Thanks for your reply.

I just re-tested on Ubuntu 20.04 with firefox 84.0.2 (latest I think), as well as Arch Linux (rolling release) with firefox 84.0.2.

Sorry I was a bit lazy with the versions in my original report, mb.

When I add a plain <textarea> element with a backround color, it does not happen, as u can see in the screenshot. I added it in the codepen.

I'll try to debug it further, but I'm not sure if I can figure it out. Any ideas welcome.
Thx

[asyncLiz]

The actual element in question is a container element with the resize CSS property set, not a <textarea>. You can reproduce the effect sans-textarea with the following markup:

<style>
  #resize {
    width: 250px;
    height: 56px;
    border: 1px solid black;
    background: darkgray;
    resize: both;
    overflow: hidden;
  }
</style>
<div id="resize"></div>

That should give you an indication if your Firefox/OS combination is still using the old non-transparent resize handle image.

[rebootl]

Ohhh, omg, rip. Okay, thx, I'll try to report there then I guess.