1375720 - svg icons on GitHub are blurry (and unevenly so)

Status: RESOLVED DUPLICATE of bug 608812

(Core :: SVG, defect, P3)

Description

[spectatorBH]

Attachment: GOOD on Blink (as is).png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3050.0 Iron Safari/537.36

Steps to reproduce:

Tested on Fx 52.2.0 ESR (32-bit) under Win7 x64 with NVIDIA GeForce GT 240M:

- open any GitHub project on commits page, e.g. https://github.com/MoonchildProductions/Pale-Moon/commits/master
- make sure you're on normal zoom (100%);
- compare the rendering of the blue icons on the right hand side of each commit row (the issue is more apparent on the ones with the tooltip "Copy the full SHA");
- try to do the same on any [not too old] Chromium-based browser and compare icons' rendering.



Actual results:

- all small SVG icons are blurry;
- some icons look much more blurry than the others, although their SVG code is the same;
- even the best-looking ones are not rendered as crisp as in Chromium-based browsers.


Expected results:

- all SVG icons are rendered crisp and clear;
- all the same SVG icons are rendered the same;
- SVG rendering should be if not as good then at least not much worse than in Chromium.

Comment 1

[spectatorBH]

Attachment: BAD on Gecko (as is).png

Comment 2

[spectatorBH]

Attachment: GOOD on Blink (pixel-zoomed 400%).png

Comment 3

[spectatorBH]

Attachment: BAD on Gecko (pixel-zoomed 400%).png

Comment 5

[Matt A. Tobin]

This is also a problem on release 54.0 (build 20170608105825) and mozilla-central 56.0a1 (build 20170622030208).

So basically what ever is causing this is an on-going issue.

Comment 6

[Kan-Ru Chen [:kanru] (UTC+9)]

I can reproduce this on Firefox 4 so this is not a new regression. If the icon on github was crisp before then they must changed something.

Comment 7

[Mark Straver]

The offending page code is an <svg> inside a <button> -- perhaps this does not get pixel-snapped and the antialiasing makes it blurry as a result?

Comment 8

[Mark Straver]

Debugging this on the CSS end, the following seems to cause the blurring:

Their framework has "line-height: 1.5;" on the body{}. Disabling that rule immediately fixes the blurring issue.

Comment 9

[Mark Straver]

Some more info:

Adding a unit to the body{} rule (em) fixes the uneven blurriness issue, but only as long as the button line height is an even number of px. If the button line height is made an odd number after adding the unit, all of the icons are blurred. This *may* be by design because centering on an odd pixel count will have you align half-way between pixels (in which case that would be a page design issue). If that's not intended, and this should be rounded/snapped, then that's a potential bug.

What seems to be the actual root bug with GitHub's layout here is that, somewhere along the way, "1.5" without a unit on the body line height is being used as a **pixel** size, which would (if additive for overall layout) explain the uneven blurring (off/on because of +1.5 (blur), +3 (crisp), +4.5 (blur), etc.).

Comment 10

[Mark Straver]

Attachment: Reduced test case

I've reduced the issue to the attached test case.
Apparently it's enough to have a list of items with a button/svg in it, and having a line height set, to cause the issue.

Setting line height to 1 has all of the icons crisp. Larger values seem to lead to unpredictable (often blurred) results, also, so I'm not entirely sure what's going on here.

Comment 11

[Kan-Ru Chen [:kanru] (UTC+9)]

Some related old bugs: bug 1003763, bug 1190815, bug 1198699, bug 1253193

Comment 12

[Mark Straver]

Marking as NEW since it's clearly a confirmed bug.

Comment 13

[Karl Dubost💡 :karlcow]

Attachment: firefox left, chrome right

I was about to open a new bug, but this one pointed by Dennis seems to fit.
This is a spin off of Webcompat issue https://webcompat.com/issues/11380

This was tested on macos 10.13 with a macbook pro 13" 2017. Intel Iris Plus Graphics 640 1536 Mo and Firefox 58.0a1 (2017-10-05) (64-bit)

On https://www.galaxus.ch/ there are some icons which looks blury.

<a data-for-element="forComparisonList" title="Produktvergleich" rel="nofollow" class="" href="/de/UserMenu/ToggleUserMenuTab?userMenuTab=ProductComparison" tabindex="-1">
    <svg aria-hidden="true" class="digicon digicon--compare " height="16" role="img" width="16">
        <symbol id="digicon--compare" viewBox="0 0 16 16">
            <path d="M2,2h5v5L2,7V2z M8,2h5v5H8V2z M2,12h11v1H2V12z M2,10h11v1H2V10z M2,8h11v1H2V8z"></path>
        </symbol>
        <use xlink:href="#digicon--compare"></use>
    </svg>
    <span>0</span>
</a>

For straight horizontal/vertical lines, Chrome is making an effort to stay on pixels. 

The line-height didn't influence in my case. 

I tested 

1. <body><svg> Properly drawn
2. <body><a><svg> Anti-Aliasing effect.


when body {font-family: Gibson;}
It didn't happen with Arial.

@font-face {
 font-family:Gibson;
 font-weight:300;
 font-style:normal;
 src:url(/fonts/gibson_light_macroman/Gibson-Light-webfontHinted.eot?v=128uc164ff49);
 src:url(/fonts/gibson_light_macroman/Gibson-Light-webfontHinted.eot?#iefix&v=128uc164ff49) format("embedded-opentype"),url(/fonts/gibson_light_macroman/Gibson-Light-webfontHinted.woff?v=128uc164ff49) format("woff"),url(/fonts/gibson_light_macroman/Gibson-Light-webfontHinted.ttf?v=128uc164ff49) format("truetype"),url(/fonts/gibson_light_macroman/Gibson-Light-webfontHinted.svg#v=128uc164ff49) format("svg")
}
@font-face {
 font-family:Gibson;
 font-weight:400;
 font-style:normal;
 src:url(/fonts/gibson_regular_macroman/Gibson-Regular-webfont.eot?v=128uc164ff49);
 src:url(/fonts/gibson_regular_macroman/Gibson-Regular-webfont.eot?#iefix&v=128uc164ff49) format("embedded-opentype"),url(/fonts/gibson_regular_macroman/Gibson-Regular-webfont.woff?v=128uc164ff49) format("woff"),url(/fonts/gibson_regular_macroman/Gibson-Regular-webfont.ttf?v=128uc164ff49) format("truetype"),url(/fonts/gibson_regular_macroman/Gibson-Regular-webfont.svg#v=128uc164ff49) format("svg")
}
@font-face {
 font-family:Gibson;
 font-weight:600;
 font-style:normal;
 src:url(/fonts/gibson_semibold_macroman/Gibson-SemiBold-webfont.eot?v=128uc164ff49);
 src:url(/fonts/gibson_semibold_macroman/Gibson-SemiBold-webfont.eot?#iefix&v=128uc164ff49) format("embedded-opentype"),url(/fonts/gibson_semibold_macroman/Gibson-SemiBold-webfont.woff?v=128uc164ff49) format("woff"),url(/fonts/gibson_semibold_macroman/Gibson-SemiBold-webfont.ttf?v=128uc164ff49) format("truetype"),url(/fonts/gibson_semibold_macroman/Gibson-SemiBold-webfont.svg#v=128uc164ff49) format("svg")
}

Comment 14

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 15

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 16

[CyberAlien]

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=608812

Workaround for issue:

svg { transform: rotate(360deg); }

or

<svg style="transform: rotate(360deg);"> ... </svg>