Icons render wrong when you zoom in and out on Chrome
jordanellis opened this issue · comments
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
- Go to https://nostalgic-css.github.io/NES.css/ and view the icons.
- Zoom in (and out at different percentages) on the browser.
- 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!
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
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 😄
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.
Not only icons but buttons are broken on Chrome as well...!
Works well on Firefox...!
