firefoxのhtmlスクロールバー背景透過がうまくいかない

firefoxのhtml要素のスクロールバー背景指定に困っています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5</head>
6<body>
7  <div class="box">テキスト<br><br><br><br><br><br><br><br><br><br><br></div>
8  <!-- ↓スクロールバー表示のための改行↓ -->
9  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
10  <!-- ↑スクロールバー表示のための改行↑ -->
11</body>
12</html>

css
1/* ↓webkit系↓ */
2::-webkit-scrollbar {
3  width: 4px;
4}
5
6::-webkit-scrollbar-track {
7  background: transparent;
8}
9
10::-webkit-scrollbar-thumb {
11  background: var(--text-color);
12}
13/* ↑webkit系↑ */
14html {
15  overflow: overlay;/* webkit系 */
16  scrollbar-color: #fff transparent;
17  scrollbar-width: thin;
18}
19
20body {
21  background: linear-gradient(0deg, #050249 0%, #67d3fc 50%);
22}
23
24.box {
25  height: 100px;
26  overflow-y: scroll;
27}

上記のように指定すると、.boxのスクロールバーはつまみが#fff、背景が透明になるのですが、htmlのスクロールバー背景が真っ白になってしまいます。

試したこと

・htmlにもbodyと同じ背景を指定
→変化なし
・scrollbar-colorのtransparent部分にrgba(255,255,255,0)を指定
→変化なし
・scrollbar-colorのtransparent部分にlinear-gradient(0deg, #050249 0%, #67d3fc 50%);を指定
→#fffやscrollbar-widthの指定すら無効になりました。linear-gradientはbackground-imageなので効かないようです。