Blurry text when zooming in with Chrome

Question

So I have this really weird issue on a page. The users need to be able to zoom out to make the text even smaller than the 10px I've already set it to. That's all well and good, but for some odd reason, the text gets really blurry at certain areas.

The text in question is in a data table, and it will only appear this way on maybe 2/5 rows, making the behaviour even weirder. Doesn't matter if I resize the window or anything like that, it's always the same 2 rows.

I've looked at multiple other questions, but they all involve issues stemming from transform: scale(), etc. This did lead me to try out multiple fixes (backface-visibility etc), but none of them worked. Using CSS zoom: 90% looks perfectly fine, so it's just when the browser does the zooming.

Would appreciate any suggestions, I've spent far too long on this problem already.

Base font: 400 13px/24px Roboto, "Helvetica Neue", sans-serif

Answer 1

Try using -webkit-font-smoothing: antialiased; like this

* {
   -webkit-font-smoothing: antialiased;
}