Bug 151737 – New webkit.org's logo blurry on retina displays

• Status: NEW
• Component: WebKit Website

[Ricci Adams]

See attached image.  The top-left logo on the new website (webkit.svg) has blurry edges for the blue and yellow boxes.  The orange box appears fine.

[Ricci Adams]

Created attachment 266422 [details]
Logo @ 10x zoom

[Ricci Adams]

This is on Safari Version 9.0.1 (11601.2.7.2)

[Ricci Adams]

This might be a browser issue related to SVG filters, as Chrome renders the logo crisply.

The #mid and #top paths in the svg file have a filter applied:

<filter x="-50%" y="-50%" width="200%" height="200%" id="shadow">
    <feOffset dx="0" dy="5" in="SourceAlpha" result="offset"/>
    <feGaussianBlur stdDeviation="2.5" in="offset" result="blur"/>
    <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0" in="blur" type="matrix" result="matrix"/>
    <feMerge>
        <feMergeNode in="matrix"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

[Timothy Hatcher]

Likely related to bug 135616. We use a hardcoded "1" for the device scale factor all over SVG code. It is sad.

[Ricci Adams]

As a workaround, you can duplicate the #mid and #top layers.  The shadow version will render in 1x, but it's already a blurred shadow, so it doesn't really matter.  The non-effect version would render crisply.

[Jon Davis]

Created attachment 266921 [details]
Blurry SVG version of the WebKit logo