Bug 151737

Summary: New webkit.org's logo blurry on retina displays
Product: WebKit Reporter: Ricci Adams <webkit.org>
Component: WebKit WebsiteAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, jond, sabouhallawa
Priority: P2    
Version: Safari 9   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=151971
Bug Depends on: 135616    
Bug Blocks:    
Attachments:
Description Flags
Logo @ 10x zoom
none
Blurry SVG version of the WebKit logo none

Ricci Adams
Reported 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.
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
View All Add attachment proposed patch, testcase, etc.
Ricci Adams
Comment 1 2015-12-01 18:40:46 PST
Created attachment 266422 [details] Logo @ 10x zoom
Ricci Adams
Comment 2 2015-12-01 18:41:20 PST
This is on Safari Version 9.0.1 (11601.2.7.2)
Ricci Adams
Comment 3 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>
Timothy Hatcher
Comment 4 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.
Ricci Adams
Comment 5 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.
Jon Davis
Comment 6 2015-12-08 11:42:36 PST
Created attachment 266921 [details] Blurry SVG version of the WebKit logo
Note You need to log in before you can comment on or make changes to this bug.