I am noticing some glitches in text animations/scaling in various modern browsers including Chrome 29, IE10, Safari 5.1 (Windows), Safari 6.0.5 (Mac), and Opera 16. Surprisingly, Firefox (tested with version 23) seems to be working fine on Windows except for Safari 6.
Here's an example:
If you hover over the "uf" tag, you'll notice that the text scales up. However, when leaving the tag, the letter 'f' may leave a trail while scaling down.
The Background Story:
This is part of a Tag Cloud where SVG elements are generated using our company's internal library (this is hardcoded in the jsfiddle). I've upgraded our implementation to include this scaling feature on hover.
Whether it's using transform: scale(2) or the current font-size transition (:hover -> 2em), I haven't found a way to scale svg-text elements with CSS3/SVG-Animations without encountering these artifacts.
Note: This issue seems to only occur with certain characters like 'f' or 't', regardless of the font used.
I've tried a few workarounds:
Experimenting with different CSS3 properties for better rendering:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);
Or attempting
-webkit-transform: scale(1.1);
And even trying out
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to="1" additive="sum" begin="mouseover" dur="1s" fill="freeze" />
All these methods resulted in the same effect across all mentioned browsers.
I haven't submitted any bug reports yet as it's hard to believe that WebKit, Presto (Opera), and Internet Explorer 10 would have the same rendering bug. I'm hopeful that there might be another technique out there for scaling text in SVGs that I'm not aware of.
Any help would be greatly appreciated!
edit: typo