If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

svg icons on GitHub are blurry (and unevenly so)

NEW
Unassigned

Status

()

Core
SVG
P3
normal
3 months ago
14 days ago

People

(Reporter: spectatorBH, Unassigned)

Tracking

52 Branch
Points:
---

Firefox Tracking Flags

(firefox57 wontfix)

Details

Attachments

(5 attachments)

(Reporter)

Description

3 months ago
Created attachment 8880670 [details]
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.

Updated

3 months ago
Component: Untriaged → Graphics
Product: Firefox → Core
(Reporter)

Comment 1

3 months ago
Created attachment 8880672 [details]
BAD on Gecko (as is).png
(Reporter)

Comment 2

3 months ago
Created attachment 8880673 [details]
GOOD on Blink (pixel-zoomed 400%).png
(Reporter)

Comment 3

3 months ago
Created attachment 8880674 [details]
BAD on Gecko (pixel-zoomed 400%).png
(Reporter)

Updated

3 months ago
Summary: svg icons on GitHub are blurry → svg icons on GitHub are blurry (and unevenly so)
Duplicate of this bug: 1375718
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.
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.
Component: Graphics → SVG

Comment 7

3 months ago
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

3 months ago
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

3 months ago
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

3 months ago
Created attachment 8881129 [details]
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.
Some related old bugs: bug 1003763, bug 1190815, bug 1198699, bug 1253193

Updated

2 months ago
Priority: -- → P3

Comment 12

2 months ago
Marking as NEW since it's clearly a confirmed bug.
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

14 days ago
status-firefox57: --- → wontfix
You need to log in before you can comment on or make changes to this bug.