Cuando uso un tema de alto contraste en Windows 10, Firefox puede usar esta configuración y me parece una característica muy útil ya que puedo configurar el color de fondo globalmente. Pero existen algunos problemas con las imágenes en Firefox. Es decir, algunas imágenes en algunos sitios simplemente desaparecieron. Sospecho que esos problemas ocurren solo con los gráficos SVG, porque las imágenes rasterizadas parecen estar bien en todas partes.
Por ejemplo, los sitios SE ahora carecen de íconos aquí:
Que originalmente era:
Esto es realmente decepcionante.
¿Hay alguna solución a este problema?
Pasé algún tiempo buscando en Google este problema y volví a verificar algunas configuraciones del sistema de Windows, pero nada ayuda. Nota: No quiero desactivar esta función, me gusta y solo quiero resolver el problema mencionado.
Respuesta1
El problema se debe a que el editor de stackexchange utiliza imágenes de fondo para sus íconos. En el modo de alto contraste, se eliminan todas las imágenes de fondo. La única forma de evitarlo sería usar una consulta @media (para un alto contraste) y/o en lugar de usar una propiedad de fondo, usar la propiedad de contenido.
[elemento]:después de {contenido: url([url de la imagen]);} Esto por sí solo permitirá que se muestre la imagen. No lo hará visible para todos los usuarios a menos que la relación de contraste sea lo suficientemente alta con el fondo.
.wmd-button > span**:después** { contenido:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); tamaño de fondo: inicial! Importante;
El siguiente código funcionará en Windows (Edge e IE11) para proporcionar botones de colores personalizados que funcionarán en alto contraste (activo, negro sobre blanco, blanco sobre negro):
@pantalla multimedia y (-ms-high-contrast:active){ .wmd-button > span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1") ; tamaño de fondo: inicial! Importante; } }