nostalgic-css/NES.css

Icons render wrong when you zoom in and out on Chrome

Open

#427 geöffnet am 2. Juni 2020

Auf GitHub ansehen
 (4 Kommentare) (3 Reaktionen) (0 zugewiesene Personen)CSS (1.294 Forks)batch import
bughelp wanted

Repository-Metriken

Stars
 (15.232 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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!

Contributor Guide

Research-Richtung
Untersuche die NES.css Icon Implementierung, wahrscheinlich in der Datei `nes icons.scss` oder ähnlich. Das Problem liegt wahrscheinlich an einer Pixelraster Fehlausrichtung bei Zoomstufen außerhalb von 100%. Erwäge, `image rendering: pixelated` zu Icon Elementen hinzuzufügen und sicherzustellen, dass alle Größenwerte ganzzahlig sind. Prüfe, ob vorhandene PRs oder Kommentare eine Lösung bieten. Teste über verschiedene Zoomstufen in Chrome.
Tech Stack
csshtml
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Veraltet
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
Basic CSS knowledge
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65