Tracking browser bugs

[mathiasbynens]

• Chrome/Opera + retina display = blurry
• Safari + retina display = blurry
• Firefox + retina display + background: url(svg) = blurry
• Firefox: greenish aura around the text

[mathiasbynens]

Noticed the rendering is different when viewing the SVG file standalone rather than through <img src=svg>. Filed https://code.google.com/p/chromium/issues/detail?id=331387.

[espadrine]

Oooh, I thought it was independent of that; I submitted a bug report about zooming: https://code.google.com/p/chromium/issues/detail?id=331385, but apparently retina causes the same issues?

[mathiasbynens]

WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=126398

[alrra]

@espadrine @mathiasbynens does specify the text-rendering property with the value "geometricPrecision" help ? (this should inform the browser to take more time to render things correctly).

edit: Here is something I've been playing with. Does it it make any difference for you guys ? (the first is the original image, the second is the svg that uses the text-rendering property + has some other changes, while the third is the svg from this repository).

[espadrine]

@alrra If you zoom the page, you should see that it becomes blurry.

(I haven't checked on a retina display, but zooming and being on retina seems to have the same effects.)

That said, it does look better.

[mathiasbynens]

Screenshots of @alrra’s test page on a retina display: http://jsbin.com/aHikuga/1

Without zoom (100% zoom)

)

150% zoom

It definitely looks better, not as blurry, but still not as sharp as it should be. It feels like viewing @1x image on a @2x screen.

[espadrine]

Apparently, this issue was fixed here in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=600207.

Also, here is the comparison between Firefox and Chrome, zoomed 2x, using text-rendering:

Chrome

Firefox

(see data:text/html,<img src='https://thefiletree.com/gh-badges/cheez-whiz.svg?plug=none'>).

[espadrine]

For the purpose of adoption, I think we should omit the text shadow until at least https://code.google.com/p/chromium/issues/detail?id=331387 is fixed.

I'm just going to paste the filter used here for future me's sake.

<filter id="shadow">
  <feOffset dx="0" dy="1" in="SourceAlpha"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .3 0"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

[mathiasbynens]

b817b57 👍