Sub pixel rendering

My nightmare. It happens in cases that are difficult to predict. I find certain device screens are more sensitive to it than others, and Chrome is often the worst offender (compared to Firefox and weirdly Edge). I see it on all sorts of screens, 1x and 1.25x alike. I hardly ever see it on a Mac? This is a stub for further exploration and tricks.

This is IMO a browser bug. Rendering should be more consistent even in the case of partial pixels.

Partial pixels

Supposedly unrounded pixels are the root cause. And indeed, often offending elements do have fractional pixels. However, see this thread. Positioning (possibly with other rounded elements?) also seems to fix the issue.

🔗 CSS and Sub-Pixel Rendering