Chrome bug with Video and text-rendering

Me and a coworker had one of those very long nights trying to figure out this one. Turns out if you are using:

  • HTML5 Video
  • 3d css (perspective, backface-visibility, ...)

You will end up with invisible text, if it has text-rendering: optimizeLegibility. But only if it overlays the bounds of an element with the above properties.

The solution for our issue was to just change text-rendering to auto... But figuring out culprit was a pain in the ass.

There is currently an open ticket for this bug: 78529