css - Why would html text sometimes appear garbled when viewing on Chrome or Safari on Windows?

Question

Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.

Users report to be using either Chrome or Safari on Windows, so this may be an issue with webkit.

Here are a three screenshots that have been taken of this occurring on https://squareup.com:

The pricing page on our current site:

Answer 1

Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with @font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.