Chrome, on windows, seems to have a text rendering bug that is especially bad when it comes to red text on dark backgrounds.

This page has two types of red text

1. <span> with position: relative;
2. <code>

When this center page is fully visible vertically, they both look fine

But, if you resize the browser window so that isn't tall enough to fit this page

• this red text will be fine, but
• this red text will go thin
• even if we make it monospace

additionally

• this red text will be fine, but if you select
• this input field
• this red text will not be fine

My actual use case is rendering math using katex, both inline $a$ and like this: $$a^b=e^{b\ln (a)}$$ Here's a .gif of a custom slider breaking nearby math on my website, with chrome's debug render layer view enabled

In CSS:

• Disabling
  .space{ position: sticky; } or
  .space{ top: 0px; } or
  .red{ position: relative; }
  
  • prevents the window-size bug from happening
  • but not the input field issue
• *{ box-sizing: content-box; }
  • breaks this but not this
• .page{ transform: translate(0px, 0px); }
  • makes this style will behave the same as this style
• .page{ transform: translate(0.4px, 0); }
  • has the same effect as above, but, notably, subpixel css translations does not break text rendering as long as the page is fully visible
• .page{ transform: translate3d(0px, 0px, 0px); }
  • breaks both this and this, regardless of all other css settings/window size

None of the following makes any difference:

• *{ text-rendering: ... ; }
• *{ -webkit-font-smoothing: ... ; }
• *{ -webkit-backface-visibility: ... ; }

Chromium issue tracker

• Input field focus layerization
• Subpixel vs grayscale AA
• Unpredictable red-on-black subpixel AA

The line below is the bottom of the page writeup by @FreyaHolmér