Icons render wrong when you zoom in and out on Chrome

[jordanellis]

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.

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!

[SecretBase]

I think that kind of rendering bug on the browser when using box shadow as a pixel art

https://codepen.io/louflan/pen/mdJKRWN

I tried others people pixel art using same box shadow trick. also having the same problems.

I guess that just some weird browsers render bug. IMHO there nothing a framework can do about it. unless change those pixel art not using the box shadow trick.

Mac chrome at 110% zoom level

Mac chrome at 67% zoom level

Mac Safari zoom out 1 level

Windows 10 Chrome 90% zoom level

[guastallaigor]

I guess that just some weird browsers render bug. IMHO there nothing a framework can do about it. unless change those pixel art not using the box shadow trick.

Yes, that's exactly what I thought. I saw this bug before, but I couldn't do anything about it. That's why I put the "help wanted" label :smile:

[HiKaylum]

May be possible converting these to SVGs rather than using box-shadow but will have to look into it and would be a breaking change.

[hoangph271]

Not only icons but buttons are broken on Chrome as well...!

Works well on Firefox...!