nostalgic-css/NES.css

Icons render wrong when you zoom in and out on Chrome

Open

#427 aberto em 2 de jun. de 2020

Ver no GitHub
 (4 comments) (3 reactions) (0 assignees)CSS (1.294 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (15.232 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Describe the bug When you zoom in on a page that has icons from nes.css on it, the icons begin to show with white grid lines in between them as if the squares used to make them aren't touching anymore.

To Reproduce

  1. Go to https://nostalgic-css.github.io/NES.css/ and view the icons.
  2. Zoom in (and out at different percentages) on the browser.
  3. View icons rendered with gaps.

Expected behavior Icons should be rendered similar to how they get rendered at 100% zoom. Screen Shot 2020-06-02 at 5 15 19 PM

Environment:

  • OS: Mac
  • Browser: Chrome
  • Build environment (i.e. NodeJS): N/A

Suggestion(s) for fixing this issue Unfortunately I don't know much about rendering graphic

Additional context Love NES.css!

Guia do colaborador

Direção de pesquisa
Investigue a implementação de ícones do NES.css, provavelmente no arquivo `nes icons.scss` ou similar. O problema provavelmente se deve ao desalinhamento da grade de pixels em níveis de zoom diferentes de 100%. Considere adicionar `image rendering: pixelated` aos elementos de ícone e garantir que todos os valores de dimensionamento sejam inteiros. Verifique se há PRs ou comentários existentes que forneçam uma correção. Teste em diferentes níveis de zoom no Chrome.
Pilha de tecnologia
csshtml
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Antigo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
Basic CSS knowledge
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65