When animated horizontally, SVG text are shivering

NEW
Unassigned

Status

()

7 years ago
6 years ago

People

(Reporter: Jeremie, Unassigned)

Tracking

(Depends on: 1 bug, {testcase})

Trunk
x86
All
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

7 years ago
Created attachment 557639 [details]
Test case for text 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" ?
(Reporter)

Comment 3

7 years ago
(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)
(Reporter)

Comment 4

7 years ago
Created attachment 557651 [details]
Test case with attribute text-rendering=geometricPrecision

This is a second version of the text case with the attribute text-rendering set to geometricPrecision on the text element
Keywords: testcase
OS: Mac OS X → All
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
(Reporter)

Updated

7 years ago
Depends on: 607883
(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.
You need to log in before you can comment on or make changes to this bug.