| Summary: | New webkit.org's logo blurry on retina displays | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Ricci Adams <webkit.org> | ||||||
| Component: | WebKit Website | Assignee: | 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
Ricci Adams
2015-12-01 18:40:24 PST
Created attachment 266422 [details]
Logo @ 10x zoom
This is on Safari Version 9.0.1 (11601.2.7.2) 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>
Likely related to bug 135616. We use a hardcoded "1" for the device scale factor all over SVG code. It is sad. 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. Created attachment 266921 [details]
Blurry SVG version of the WebKit logo
|