Bug 151737 - New webkit.org's logo blurry on retina displays
Summary: New webkit.org's logo blurry on retina displays
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Website (show other bugs)
Version: Safari 9
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 135616
Blocks:
  Show dependency treegraph
 
Reported: 2015-12-01 18:40 PST by Ricci Adams
Modified: 2017-01-18 23:38 PST (History)
3 users (show)

See Also:


Attachments
Logo @ 10x zoom (219.26 KB, image/png)
2015-12-01 18:40 PST, Ricci Adams
no flags Details
Blurry SVG version of the WebKit logo (4.59 KB, image/svg+xml)
2015-12-08 11:42 PST, Jon Davis
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ricci Adams 2015-12-01 18:40:24 PST
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.
Comment 1 Ricci Adams 2015-12-01 18:40:46 PST
Created attachment 266422 [details]
Logo @ 10x zoom
Comment 2 Ricci Adams 2015-12-01 18:41:20 PST
This is on Safari Version 9.0.1 (11601.2.7.2)
Comment 3 Ricci Adams 2015-12-02 00:27:15 PST
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>
Comment 4 Timothy Hatcher 2015-12-02 10:03:42 PST
Likely related to bug 135616. We use a hardcoded "1" for the device scale factor all over SVG code. It is sad.
Comment 5 Ricci Adams 2015-12-02 19:25:37 PST
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.
Comment 6 Jon Davis 2015-12-08 11:42:36 PST
Created attachment 266921 [details]
Blurry SVG version of the WebKit logo