Add documentation for blurry text when pixel offset isn't a precise integer
Mentioned here, but I believe I've seen this same issue before. I think we should document when this happens and how to prevent it.
It bugs me that this rendering issue is the very first thing you see when devicePixelRatio is 1.
This is of course because the "OK" text is offset bu 0.5px.
Here's how it looks when I manually add a 0.5px spacer for that specific element:
button::before {
content: "";
margin-left: 0.5px;
}
Question is of course, is it possible - with CSS only - to add 0.5px spacing to centered elements, or make sure some other way that the text starts on an integer value x position?
Another non-ideal way I found that works in Firefox (and possibly Chrome):
<button>
<span style="display: inline-block;transform: translate(0,0);">OK</span>
</button>
Somehow the combination of inline-block and translate(0,0) makes the text snap to integer pixels. Not sure why exactly, but this way both buttons render properly. I have not found a way to achieve this without wrapping the button text in an extra html element.