1199538 - Incorrect SVG text rendering when font-size is effectively smaller than 8px

Status: NEW

(Core :: SVG, defect)

Description

[Denilson Figueiredo de Sá]

Attachment: bug-demonstration.gif

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Steps to reproduce:

Look at this testcase:
http://denilsonsa.github.io/html5-knob/bugs.html#bug-tinted-image-background
https://github.com/denilsonsa/html5-knob/commit/e1cc3518f95f8f6d23e7fcd7c6bdbdf35b5c5f4b

I have an SVG element with some <text> (that may or may not be rotated). After account for the SVG element dimensions and viewBox, as well as other SVG transformations, I found the following rule:

If the text will be rendered with an adjusted font-size smaller than 8px, then the rendering is completely broken.


Actual results:

See the attached animated GIF.


Expected results:

It should have looked good.

Tested with Firefox 40. Works perfectly in Chrome 44.

Comment 1

[Denilson Figueiredo de Sá]

Correction: the first URI should have been:
http://denilsonsa.github.io/html5-knob/bugs.html#bug-chromatic-wheel

Comment 2

[Denilson Figueiredo de Sá]

Attachment: testcase.zip

Also attaching a copy of the testcase files.

Comment 3

[Robert Longson [:longsonr]]

Are you on a mac? Does it have a retina display? I'm unable to reproduce this issue on my non-retina mac.

Comment 4

[Alice0775 White]

On windows7, setting layers.force-active = true seems fix the problem.

Comment 5

[Alice0775 White]

Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=5e226d928613&tochange=3a23afb038a5


Triggered by:Bug 839955

Comment 6

[Denilson Figueiredo de Sá]

Attachment: firefox-40-android.png

Firefox 40 on Lubuntu 15.04. For what is worth, DPI is 96.
Sorry, I should have mentioned it before, instead of assuming it would happen anywhere.

I've also tested on Firefox 40.0.3 on Android. The text rendering is correct in any size, but the text position is not. Check the screenshot.

Comment 7

[Denilson Figueiredo de Sá]

On Linux, setting layers.force-active = true makes no difference.

Comment 8

[Martin Hejral]

I confirm this bug for FF 48 and less on Mac OS X 

probably related to

https://bugzilla.mozilla.org/show_bug.cgi?id=1272417

Comment 9

[jedwards]

I"m seeing potentially related scaling issues in Firefox 51.0.1 on OS X on this site:
https://jedwards1211.github.io/react-therion-protractor/#/preview/?unit=in&angleUnit=deg&paperScale=1&worldScale=10&radius=20

(compare to correct rendering in Chrome)
The numbers in the middle of the protractor are huge.  When I tweak the size in the devtools I find that they become huge beneath a certain font-size, that does seem to be around effectively 8 px

Comment 10

[itsupport]

I'm also seeing this bug on Firefox 58 on Linux (running Linux Mint 18.3). No issue on Windows.
I have text in an SVG that is first scaled for aspect ratio, and then scaled up to fit inside a box.
I had thought I was seeing the opposite behaviour : linear scaling up to a certain font-size and then weirdness, but tracking back through the code, it is the initial scaling for aspect ratio that puts it effectively below 8px. Then as the text is mangled, the incorrect getBBox().width effectively doubles my scaling.

Comment 11

[itsupport]

With your test case, if I raise the unit sizes by an order of magnitude, it works correctly.
It seems that Firefox has these issues with the arbitrary units used in SVG files, whether they are too large or too small.

See the attached file.

Comment 12

[thomas.smailus]

I can confirm this bug exists in FF ESR 52.8.0

Below a certain level, discontinuity in the glyph scaling appears, as if there is rounding or insufficient numerical precision provided in the internal variables. 

Reproduced with attached SVG file: Small-Font-Diagram.svg
And effect seen in attached screen capture based file: Small-Font-Test-Diagram.png

Comment 13

[thomas.smailus]

Attachment: Test case SVG graphic that illustrates the problem

SVG graphic that demonstrates the glyph rendering problem in the browser.

Comment 14

[thomas.smailus]

Attachment: Test case as rendered in FF and IE illustrating the effect obsorved