<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - [Regression] Icon fonts using hinting blurred since r172008 [r171989-r172326]"
href="https://bugs.webkit.org/show_bug.cgi?id=152393">152393</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>[Regression] Icon fonts using hinting blurred since r172008 [r171989-r172326]
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>ono@java.pl
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=267575" name="attach_267575" title="Given octicons.html example rendering with even browser width vs odd browser width">attachment 267575</a> <a href="attachment.cgi?id=267575&action=edit" title="Given octicons.html example rendering with even browser width vs odd browser width">[details]</a></span>
Given octicons.html example rendering with even browser width vs odd browser width
Many modern sites use icon fonts, such as Font Awesome, Octicons, etc. This is more optimal for bandwidth conservation and HiDPI displays support than using separate images. These fonts come usually optimized for certain sizes, eg. Octicons for multiple of 16px font height. This optimization relies on font hinting that makes glyph elements to be aligned to pixel boundaries, this guarantees visual sharpness and clearness of the icons.
Some time ago this technique was giving desired effects in Safari and other WebKit based browsers. But since last year font icons started to appear blurry. After some investigation I found out that WebKit renders blurry font icons only when the rendered text position is fractional (non-integer), eg. when using margin: auto with fixed text container width and odd pixel number browser window width causing margin to be fractional. This is illustrated better with following HTML example below.
I did a bisection tests on WebKit nightly releases running on 10.9. I blame revision r172008 because it is only revision between r171989-r172326 that changed text rendering, and r171989 nightly downloaded from webkit.org does not exhibit the buggy behavior, while next available nightly r172326 exhibits buggy blurry rendering.
IMHO this bug has major severity, as causing blurry rendering on many well known sites such as GitHub (see attached screenshots). This cannot be worked around using some CSS tricks. It reduces experience and causes eye strain.
Please test the following page with even pixel browser window width and odd width to see the difference (LeftIntegerPositionRightFractionalPosition.png).
The fixed 800px width #container has automatic margin. So if browser window width is 1000px, then the left-margin is 1000px-800px/2 -> 100px, but when browser windows width is 1001px then left-margin is non-integer 100.5px causing blur since r172008.
--- octicons.html
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.css">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.css</a>" media="all" rel="stylesheet">
<head>
<style>
#container {
border: 1px solid silver;
padding: 10px;
width: 800px;
margin: auto;
height: 100%;
}
</style>
</head>
</head>
<body>
<div id="container">
<span class="octicon octicon-repo"></span>
<span class="octicon octicon-plus"></span>
</div>
</body>
</html>
--- /octicons.html</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>