[Webkit-unassigned] [Bug 152393] New: [Regression] Icon fonts using hinting blurred since r172008 [r171989-r172326]

Thu Dec 17 13:00:22 PST 2015

https://bugs.webkit.org/show_bug.cgi?id=152393

            Bug ID: 152393
           Summary: [Regression] Icon fonts using hinting blurred since
                    r172008 [r171989-r172326]
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ono at java.pl
                CC: simon.fraser at apple.com

Created attachment 267575
  --> https://bugs.webkit.org/attachment.cgi?id=267575&action=review
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="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.css" 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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151217/1b4b4a89/attachment-0001.html>