Closed Bug 684041 Opened 12 years ago Closed 10 months ago
When animated horizontally, SVG text are shivering
When you try to animate an SVG text horizontally, this text is slightly shivering. This shiver occurs whether the animation is made through the transform attribute or the x attribute. In the attached test case, the first line is a regular SVG text element and the second line is a bunch of SVG Path element. Look at the first line shivering when the second is not. I guess the problem comes from the way the text is handled under the hood. I suspect sub-pixel calculation to be part of the problem. In SVG, it can be somewhat surprising (and sometimes unwanted).
Side note: if you zoom all the way out, the effect is more pronounced. The line seems to move in "ripples", kind of like an inchworm. (different letters jump by slightly different amounts, at any given time) If you zoom all the way in, the two lines appear near-identical. (bug mostly goes away)
Have you tried text-rendering="geometricPrecision" ?
(In reply to Robert Longson from comment #2) > Have you tried text-rendering="geometricPrecision" ? Yes, but that change nothing (but it's sounds logical to assume that if my assumption about the sub-pixel thing is correct this value should fix the problem... unfortunatly it is not the case here)
This is a second version of the text case with the attribute text-rendering set to geometricPrecision on the text element
Doesn't happen on Windows with hardware acceleration. Does without. This would point to it being a subpixel positioning thing so really this is a core graphics issue.
Component: SVG → Graphics
QA Contact: general → thebes
(For what it's worth, as of recent Nightly builds (Firefox 24), you will get much better performance using 'transform' to move text around than you will using 'x' etc. In fact that goes for all graphics in an SVG, really.
Status: NEW → RESOLVED
Closed: 10 months ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.