SVG border rendering showing up pixelated on mobile #517
Description
Describe the bug
I noticed that svg border rendering is showing up weird on mobile, specifically for buttons, text input, and tables (which my app uses). This behavior was consistent across the two mobile devices I tested: pixel 7 android 16 w/kiwi and chrome browser, and an iphone with safari. screenshots included below.
To Reproduce
Use default nes-btn, nes-input, nes-table.is-bordered classes on mobile browser
Expected behavior
If should render solid like it does on desktop
Screenshots
Before Fix:
After fix:
Environment:
- OS: Android/iPhone
- Browser: Kiwi/Chrome/Safari
Suggestion(s) for fixing this issue
I actually have a fix for this which I've used locally, you can see in the bottom three screenshots what the results were like...
I don't know much about CSS/browser rendering on mobile, but here's the css overrides I used in my app:
.nes-btn {
border-width: 4px;
border-style: solid;
border-image-slice: 2;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><rect x="2" y="1" width="1" height="1" fill="rgb(33,37,41)"/><rect x="1" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="3" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="2" y="3" width="1" height="1" fill="rgb(33,37,41)"/></svg>');
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.nes-input {
border-image-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><rect x="2" y="1" width="1" height="1" fill="rgb(33,37,41)"/><rect x="1" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="3" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="2" y="3" width="1" height="1" fill="rgb(33,37,41)"/></svg>');
image-rendering: pixelated;
image-rendering: crisp-edges;
border-image-repeat: stretch;
border-style: solid;
}
.nes-table.is-bordered {
border-image-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><rect x="2" y="1" width="1" height="1" fill="rgb(33,37,41)"/><rect x="1" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="3" y="2" width="1" height="1" fill="rgb(33,37,41)"/><rect x="2" y="3" width="1" height="1" fill="rgb(33,37,41)"/></svg>');
image-rendering: pixelated;
image-rendering: crisp-edges;
border-image-repeat: stretch;
border-style: solid;
}
The biggest difference and I think the meat of the issue is the border-image-source property. In the default library (for all three of these classes) it's an svg drawn using paths, while in my change it's the same svg drawn using rectangles 🤷
I'd be happy to make a PR for this, but I noticed this package doesn't have a lot of activity on the main branch the last few years... I'm mostly just leaving this here for others to come check out if they're having issues!