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.

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

Also attaching a copy of the testcase files.

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

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

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

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.

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

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

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

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.

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.

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

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