1110005 - Poor quality of SVG badges on Windows

Status: VERIFIED WORKSFORME

(Core :: SVG, defect)

Description

[Duro]

Attachment: Display on Win8.1 and OSX10.9.5 - FF vs native OS browsers

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

View page at https://github.com/PCMDI/pcmdi_metrics using F34.0.5 (Win 8.1 x64)


Actual results:

SVG badges look terrible when contrasted to the same page displayed on IE 11.0.9600 (Win8.1 x64), FF34.0 (OS X 10.9.5), Safari 7.1 (OS X 10.9.5)


Expected results:

I would have expected at a minimum that FF34 on OS X 10.9.5 AND Win8.1 would look near identical, which is not the case.

Comment 1

[Loic]

Honestly, I don't really see the difference.

Comment 2

[Daniel Holbert [:dholbert]]

I can't reproduce (using Firefox 34 beta on Win8.1, on BrowserStack), but the attached screenshot does seem to show some issues with the text positioning inside the badges -- particularly the last one. (The "1" character is over on the gray area, instead of being on the orange area.)

I wonder if this is a HiDPI issue... Duro, do you happen to know if you have a High DPI screen?
Also, can you reproduce the bad rendering (with the "1" on the orange) by simply viewing that SVG file directly?
Direct URL to SVG file: https://camo.githubusercontent.com/9bb17c38f6763b37c6062d624d5e05246a1c244f/687474703a2f2f696d672e736869656c64732e696f2f62616467652f444f492d31302e353238312f7a656e6f646f2e78787878782d6f72616e67652e737667

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> Also, can you reproduce the bad rendering (with the "1" on the orange) by
> simply viewing that SVG file directly?

Sorry, meant to say:With the "1" on the *gray* (not orange).

Comment 4

[Daniel Holbert [:dholbert]]

Note that the SVG text inherits this from its <g>:
  text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"

If the text happens to be bigger because of the particular font that we end up with, then it'll overflow on the left and the right, because of the "text-anchor:middle". That seems to be what's happening here.

So, we must be ending up with a different font (or different font-size) than IE does on your windows system, for some reason.

Comment 5

[Jonathan Kew [:jfkthame]]

Or different rendering/hinting options. It looks to me like it's probably the same font, but is being rendered with a very different mode, probably aggressive GDI-style hinting. Reproducing the issue is probably dependent on hardware acceleration, and/or on system font rendering settings.

Note that Verdana is one of the fonts listed by default in the gfx.font_rendering.cleartype_params.force_gdi_classic_for_families pref. You could try removing it from that list, or setting gfx.font_rendering.cleartype_params.force_gdi_classic_max_size to zero to eliminate its effect, and see if that makes a difference. (I think this may require restarting the browser to take effect.)

Comment 6

[Duro]

@jfkthame these are the following settings currently:

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families;default;string;Arial,Consolas,Courier New,Microsoft Sans Serif,Segoe UI,Tahoma,Trebuchet MS,Verdana
gfx.font_rendering.cleartype_params.force_gdi_classic_max_size;default;integer;15
gfx.font_rendering.graphite.enabled;default;boolean;true
gfx.font_rendering.opentype_svg.enabled;default;boolean;true

There are also some other settings under gfx.font_rendering which also look like they may be causing grief:

gfx.font_rendering.cleartype_params.cleartype_level;-1
gfx.font_rendering.cleartype_params.enhanced_contrast;-1
gfx.font_rendering.cleartype_params.pixel_structure;-1
gfx.font_rendering.cleartype_params.rendering_mode;-1

Comment 7

[Duro]

It seems that these badges now look a lot better in the default settings for FF36.0 - not sure what has changed here, but it's certainly clearer.

Comment 8

[Daniel Holbert [:dholbert]]

Nice! I'm resolving this as WORKSFORME then (that's what we use to indicate "seems fixed, though we don't exactly know when/how"), though if something's still not quite right, feel free to reopen or to file a new bug on any remaining issues.

Comment 9

[Duro]

I've started seeing similar behaviour on OS X 10.10.5/FF42.0 and now on maps.google.com pages - what used to be sharp now appears fuzzy and blurry..

And the original issue on Windows 10/FF42.0 is also back

To make matters worse, even the Windows Edge browser renders the badges more cleanly than firefox 42.0!

Comment 10

[Robert Longson [:longsonr]]

If the original issue is back, can you establish a regression range using mozregression? https://harthur.github.io/mozregression/

Comment 11

[Duro]

Attachment: Win10-10586-FF42.0

Display on Win10-10586 - FF42.0

Comment 12

[Duro]

Attachment: Win10-10586-Edge-25-10586

Display on Win10-10586 - Edge-25.10586

Comment 13

[Duro]

Attachment: Win10-10586-IE-11.11

Display on Win10-10586 - IE-11.11

Comment 14

[Duro]

So I've attached a couple of screengrabs of maps.google.com from 3 browsers on Windows 10, and it does appear that the clarity of the text in particular in FF is much poorer than the other browsers - similar to the badge issue (and the original attachment).

I have noted that changing the font sizes in FF (ctrl +/-) really leads to the quality of the text to diminish markedly, when I did think that google maps was moving toward vector text objects..

I do think some tweaking is possible here to get FF at least equivalent to other default system browsers.

I'm using standard monitors (Dell U3014, 2560 x 1600 @60hz) and on the OS X machine the Thunderbolt Display (27-inch, at default resolution from a MacBook Pro 15" retina) - so neither of these are high DPI screens

Comment 15

[Robert Longson [:longsonr]]

Duro, this is about badges, don't try to hijack this bug, create your own.

Comment 16

[Robert Longson [:longsonr]]

Duro, you raised this bug about badges, if you want to have a bug about google maps then create another bug. They may or may not be the same. If bugs are regressions then the best thing is to get us a regression range.

Comment 17

[Duro]

@Robert, the issue I raised was about SVG graphics with the example as the github SVG badges.

It would appear to me that my customisations of the FF browser (so opening a webpage - for e.g. maps.google.com - and then reducing the font size [ctrl-]) are most likely causing this poor onscreen rendering as FF is not dealing well with me enforcing the reduced font size.

I'm not sure how best to proceed with this issue then - would you expect the use of ctrl- on webpages still preserves the clarity of sharp text/vector objects?

Comment 18

[Robert Longson [:longsonr]]

I'm not convinced that the badges issue and the google maps issue are the same. Raise a new bug for the google maps issue, they can always be duplicated later.

There are various causes of blur: using filters, not drawing at 0.5 co-ordinates (http://cairographics.org/FAQ/#sharp_lines), scaling/translating things so they aren't at 0.5 co-ordinates (which may be what you're doing) and possibly even rendering bugs we can do something about too.

If you want *this* bug reopened, see comment 10.