Search code examples
csssvgcss-animationssvg-animatevisual-artifacts

Artifacts with SVG text animations (CSS3)

I'm experiencing artifacts for text animations/scaling in most modern browsers: Chrome 29, IE10, Safari 5.1 (Windows), Safari 6.0.5 (Mac) and Opera 16. Only Firefox (tested with version 23) is working fine (all on Windows, except Safari 6).

Example:

http://jsfiddle.net/jejPS/1/

Hover over the "uf" tag. The text will scale up. When leaving the tag, the 'f' will leave a trail while scaling down.

Background:

This is part of a Tag Cloud. The SVG elements are generated by a company internal library (hardcoded in the jsfiddle). I enhanced our implementation to add this scaling on hover feature.

It doesn't matter if you use transform: scale(2) or the current font-size transition (:hover -> 2em). I haven't found any way to scale svg-text elements with CSS3/SVG-Animations without these artifacts.

Note: It appears that this only happens with certain characters like 'f' or 't'. But with every font I tried

I tried several workarounds:

Different CSS3 properties for better rendering:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); 
-webkit-transform: translate3d(0,0,0);

Or using

-webkit-transform: scale(1.1);

And even

<animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to="1" additive="sum" begin="mouseover" dur="1s" fill="freeze" />

All with the same effect in all of the mentioned browsers.

I haven't filed any bug report yet because I can hardly imagine that WebKit, Presto (Opera) and Internet Explorer 10 all have the same rendering bug. I hope that there is just another way of scaling text in SVGs out there which I'm not yet aware of.

Thanks a lot for any help!

edit: typo

Solution

  • A cheap hack that also seems to work is to add a non-breakable space at the end of your text (ie. "uf&#160;").