Wenn ich unter Windows 10 ein Design mit hohem Kontrast verwende, kann Firefox diese Einstellung verwenden. Ich finde diese Funktion sehr nützlich, da ich die Hintergrundfarbe global festlegen kann. Es gibt jedoch einige Probleme mit Bildern in Firefox. Insbesondere sind einige Bilder auf einigen Websites einfach verschwunden. Ich vermute, dass diese Probleme nur bei SVG-Grafiken auftreten, da Rasterbilder überall in Ordnung zu sein scheinen.
Beispielsweise fehlen auf SE-Sites jetzt hier Symbole:
Was ursprünglich war:
Das ist wirklich enttäuschend.
Gibt es irgendeine Lösung für dieses Problem?
Ich habe einige Zeit damit verbracht, dieses Problem zu googeln und einige Windows-Systemeinstellungen erneut zu überprüfen, aber nichts hilft. Hinweis: Ich möchte diese Funktion nicht deaktivieren, sie gefällt mir und ich möchte nur das erwähnte Problem lösen.
Antwort1
Das Problem entsteht dadurch, dass der Stackexchange-Editor Hintergrundbilder für seine Symbole verwendet. Im Modus mit hohem Kontrast werden alle Hintergrundbilder entfernt. Die einzige Möglichkeit, dies zu umgehen, besteht darin, eine @media-Abfrage (für hohen Kontrast) zu verwenden und/oder statt einer Hintergrundeigenschaft die Inhaltseigenschaft zu verwenden.
[element]:after {content: url([image url]);} Nur dadurch wird das Bild angezeigt. Es ist jedoch nicht für alle Benutzer sichtbar, wenn das Kontrastverhältnis zum Hintergrund nicht hoch genug ist.
.wmd-button > span**:nach** { Inhalt:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); Hintergrundgröße: initial !important;
Der folgende Code funktioniert in Windows (Edge und IE11), um benutzerdefinierte farbige Schaltflächen bereitzustellen, die mit hohem Kontrast funktionieren (aktiv, Schwarz auf Weiß, Weiß auf Schwarz):
@media screen und (-ms-high-contrast:active) { .wmd-button > span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); Hintergrundgröße: initial !important; } }