<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><span class="vcard"><a class="email" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield <mmaxfield@apple.com>"> <span class="fn">Myles C. Maxfield</span></a>
</span> changed
<a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED INVALID - REGRESSION (r172008): Icon fonts using hinting blurred at odd window widths"
href="https://bugs.webkit.org/show_bug.cgi?id=152393">bug 152393</a>
<br>
<table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>What</th>
<th>Removed</th>
<th>Added</th>
</tr>
<tr>
<td style="text-align:right;">Status</td>
<td>NEW
</td>
<td>RESOLVED
</td>
</tr>
<tr>
<td style="text-align:right;">Resolution</td>
<td>---
</td>
<td>INVALID
</td>
</tr></table>
<p>
<div>
<b><a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED INVALID - REGRESSION (r172008): Icon fonts using hinting blurred at odd window widths"
href="https://bugs.webkit.org/show_bug.cgi?id=152393#c11">Comment # 11</a>
on <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED INVALID - REGRESSION (r172008): Icon fonts using hinting blurred at odd window widths"
href="https://bugs.webkit.org/show_bug.cgi?id=152393">bug 152393</a>
from <span class="vcard"><a class="email" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield <mmaxfield@apple.com>"> <span class="fn">Myles C. Maxfield</span></a>
</span></b>
<pre>The cause of this bug is pretty straightforward - the font is trying to draw something exactly n pixels wide, but it starts halfway through the first pixel. Therefore, your edges which you thought appeared at discrete pixel boundaries all actually happen halfway through the pixel, leading to 50% coverage and grey pixels.
In one respect, this is working as intended. Sub-pixel placement of layout objects is a progression. Fonts, in general, benefit greatly from sub-pixel positioning, and it greatly improves readability of text.
All the major browsers which run on OS X all have the same behavior here.
For your use case of showing icons in web content, I would suggest using SVG. Fonts were never designed for this purpose.
A "solution" is simply to make sure your markup always results in these icons being drawn at integer pixel locations.
Another idea for a solution is to allow something like a "round()" function which can be used inside the "calc()" CSS function. Presumably something like this would suit your needs?</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>