imathis/octopress — Issue #292: Font rendering issues on headers
Author: treyhunner
Created: 2011-11-21 01:41:12+00:00
State: open

I have seen this problem on at least a dozen Octopress-powered blogs recently. I haven't found out how to reproduce the problem consistently but it seems like it usually happens when visiting a page I have never been to before.

Problem:

1. Page loads
2. Scroll down the page until after passing a header (h1, h2, or h3). The header font may appear broken at the top or in the middle as if it was cut through with a horizontal line and incorrectly glued back together
3. Attempting to highlight headers results in strange inconsistencies with background color and text color of highlighted section. It is not always possible to highlight every character of a header.

I have only seen this on page headers and it seems like removing the `text-rendering: optimizelegibility` attribute fixes the behavior. Resizing the window or refreshing the page appears to fix the issue.