Ao usar o tema de alto contraste no Windows 10, o Firefox pode usar essa configuração e considero um recurso muito útil, pois posso definir a cor de fundo globalmente. Mas existem alguns problemas com imagens no Firefox. Ou seja, algumas imagens em alguns sites simplesmente desapareceram. Suspeito que esses problemas ocorrem apenas com gráficos SVG, porque as imagens raster parecem funcionar em todos os lugares.
Por exemplo, os sites SE agora não possuem ícones aqui:
Que originalmente era:
Isso é realmente decepcionante.
Existe alguma solução para este problema?
Passei algum tempo pesquisando esse problema no Google e verifiquei novamente algumas configurações do sistema Windows, mas nada ajuda. Observação: não quero desabilitar esse recurso, gosto dele e só quero resolver o problema mencionado.
Responder1
O problema é causado porque o editor stackexchange usa imagens de fundo para seus ícones. No modo de alto contraste, todas as imagens de fundo são removidas. A única maneira de contornar isso seria usar uma consulta @media (para alto contraste) e/ou em vez de usar uma propriedade background, usar a propriedade content.
[element]:after {content: url([image url]);} Isso por si só permitirá que a imagem apareça. Não o tornará visível para todos os usuários, a menos que a taxa de contraste seja alta o suficiente com o fundo.
.wmd-button > span**:depois** { contente:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); tamanho do plano de fundo: inicial! Importante;
O código a seguir funcionará no Windows (Edge e IE11) para fornecer botões coloridos personalizados que funcionarão em alto contraste (ativo, preto sobre branco, branco sobre preto):
@media screen e (-ms-high-contrast:active){ .wmd-button > span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1") ; tamanho do plano de fundo: inicial! Importante; } }