Firefox 72. Farbige Scrollbars loswerden, überschreiben

Mit jedem Update eine neue Überraschung. Seit Firefox 72.0 werden die Scrollbars in der Hintergrundfarbe des BODY-Tags eingefärbt. Eigentlich als Bugfix für das so genannte Dark Theme bzw. den Dark Mode gedacht, wo es Probleme bei der Darstellung gab, ist das für viele Seiten sinnfrei bis hässlich bzw. gegen die Intention des Gestalters. Man kann das mit bisschen HTML- und CSS-Kenntnissen verhindern.

Firefox72 faerbt meinen vertikalen Scrollbar unerwuenscht rot
Firefox72 faerbt meinen vertikalen Scrollbar unerwuenscht rot

Auf dem Bild zu diesem Beitrag sieht man mein nerdiges Problem. Der seitliche Scrollbar der Webseite ist mit Firefox plötzlich rot. Da ich für den BODY-Tag eine Hintergrundfarbe definiert habe, die sowieso nur auf sehr großen Bildschirmen zum Tragen kommt, stört das den Gesamteindruck der Seite für Normalbildschirme, die vornehmlich weißen Hintergrund hat.

Hinweis: Im Entwickler-Tool "Bildschirmgrößen testen" ist das Färbeverhalten derzeit (Firefox 72.0) noch nicht adaptiert worden.

Der HTML-Grundaufbau des nach außen sichtbaren Bereichs meiner Seite sah vor der Änderung so aus:

<body class="diverse-klassen">
  <div id="div4all">
   ---- DIVERSE TAGS UND INHALTE ----
  </div>
</body>

Der BODY-Tag hat per CSS eine rote background-color. Da die id="div4all" bereits eine weiße Hintergrundfarbe hat, habe ich einen weiteren DIV-Container mit id="mainBackground" eingeführt, der innerhalb BODY alles andere umschließt.

<body class="diverse-klassen">
 <div id="mainBackground">
  <div id="div4all">
   ---- DIVERSE TAGS UND INHALTE ----
  </div>
 </div>
</body>

Mein CSS habe ich so geändert, dass dieser neue Container die ehemalige background-color vom BODY erhält und der BODY-Tag selbst eine Hintergrundfarbe transparent. Ich gehe davon aus, dass man jedwede Farbe nehmen kann, die einem auch für die Scrollbars gefällt, da der neue DIV alles überdeckt, abgesehen vom Scrollbar.

/* FF 72 fix. Scrollbars colored like body background: */

body
{
 background-color: transparent;
}

#mainBackground
{
 background-color: #990134;
}

Bedenken sollte man, dass die Änderung im Firefox im Namen der Barrierefreiheit/Accessibility durchgeführt wurde. Man sollte unter dieser Überschrift die Farbauswahl also auch noch prüfen. Vielleicht muss auch ich nach Tests noch nachbessern und was anderes als transparent nehmen.