nostalgic-css/NES.css

Icons render wrong when you zoom in and out on Chrome

Open

#427 opened on 2020年6月2日

GitHub で見る
 (4 comments) (3 reactions) (0 assignees)CSS (1,294 forks)batch import
bughelp wanted

Repository metrics

Stars
 (15,232 stars)
PR merge metrics
 (30d に merged PR はありません)

説明

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!

コントリビューターガイド

調査方針
NES.css のアイコン実装を調査します。おそらく `nes icons.scss` または類似のファイルにあります。問題は、100% 以外のズームレベルでのピクセルグリッドのずれに起因している可能性があります。アイコン要素に `image rendering: pixelated` を追加し、すべてのサイズ値を整数にすることを検討してください。既存の PR やコメントに修正案があるか確認します。Chrome でさまざまなズームレベルをテストしてください。
技術スタック
csshtml
領域
frontend
Issue 種別
バグ
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3時間
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
古い
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
明確
前提条件
Basic CSS knowledge
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
65