1046835 - Blurry inline SVG rendering

Status: RESOLVED DUPLICATE of bug 608812

(Core :: SVG, defect)

Description

[kaelig]

Attachment: home-icon.svg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2107.2 Safari/537.36

Steps to reproduce:

1. Go to http://jsbin.com/vetocowu/1/ (with a viewport of around 1000px or up)
2. Look at the "home" icon in the navigation (hint: it's super jaggy)


Actual results:

"Home" icon is blurry (on a regular low dpi — "non-Retina" — display)


Expected results:

"Home" icon should render as crisply as when I open the .svg file (see attachement).

See this image for a comparison of rendering between browsers (vs original): http://twitter.com/kaelig/status/494805682848550912/photo/1

Note that `svg:not(:root) { overflow:hidden; transform: translate(0,0); }` seems to fix it. (thanks to jeremie.patonnier for looking into it).

Also note that the SVG polygon snaps exactly to the pixel grid.

Comment 1

[Robert Longson [:longsonr]]

Can you create a reduced testcase please?

Comment 2

[kaelig]

(In reply to Robert Longson from comment #1)
> Can you create a reduced testcase please?

Of course. This is about as small as I could get it without spending too much time on it (CSS is minified, which is non trivial to reduce):

http://jsbin.com/vetocowu/4

Let me know if I can do something else to help.

Comment 3

[adam]

I can confirm that this is happening on LOW RES Macs only; HiRes Macs look beautiful.

Comment 4

[Jonathan Watt [:jwatt]]

Fully reducing testcases isn't a great use of dev time. Devs will generally focus on bugs that already have fully reduced testcases, so if someone can reduce the testcase from comment 2 this bug has a better chance of getting a fix.

Comment 5

[johannes.krtek]

minimal testcase: http://codepen.io/anon/pen/Dgrec

(scale firefox browser window in order to see the bug)

similar/identical bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1003763

Comment 6

[Geoff Lankow (:darktrojan)]

Attachment: Test case

Since the <svg> in this case is positioned at a pixel boundary, the <rect> it contains should surely also be, since its X and Y coordinates are relative to the <svg>, not the <div> containing it. The two drawings should be identical, as they are in Chrome and IE.

Comment 7

[Robert Longson [:longsonr]]

See http://cairographics.org/FAQ/#sharp_lines you need to draw at 0.5

Comment 8

[Josh Matthews [:jdm]]

Jeremie, are you actually the right mentor for fixing this?

Comment 9

[Jeremie Patonnier :Jeremie]

(In reply to Josh Matthews [:jdm] from comment #8)
> Jeremie, are you actually the right mentor for fixing this?
No, I'm not a good mentor to help fix Gecko Rendering :-/ Jonathan Watt or  Robert Longson are definitely a better match ;)

(In reply to Robert Longson from comment #1)
> Can you create a reduced testcase please?
However, Here is a perfect reduce test case: http://jsfiddle.net/JeremiePat/sx8gc406/

There is clearly a change in the rendering behavior of Firefox with or without transform applied to an svg container.

Comment 10

[jak.so]

I have same problem on non-retina mac os x.

https://jsfiddle.net/mrakjos/u572Lwvb/18/

When is svg centered in width of 101px, its borders are blurry, because are positioned on 0.5px. I can fix it with margin-right 1px for centered object, but when I change browser width, problem is back.

Svg with shape-rendering="crispEdges" look worse

Comment 11

[Patrick Westerhoff]

This is probably the same as bug 608812.