nostalgic-css/NES.css

Icons render wrong when you zoom in and out on Chrome

Open

#427 ouverte le 2 juin 2020

Voir sur GitHub
 (4 commentaires) (3 réactions) (0 assignés)CSS (1 294 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (15 232 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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!

Guide contributeur

Direction de recherche
Étudiez l'implémentation des icônes de NES.css, probablement dans le fichier `nes icons.scss` ou similaire. Le problème provient probablement d'un mauvais alignement de la grille de pixels à des niveaux de zoom autres que 100 %. Envisagez d'ajouter `image rendering: pixelated` aux éléments d'icône et assurez vous que toutes les valeurs de dimension sont des entiers. Vérifiez si des PR ou commentaires existants fournissent un correctif. Testez sur différents niveaux de zoom dans Chrome.
Stack technique
csshtml
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Ancienne
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
Basic CSS knowledge
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
65