A cheap hack that also seems to work is to add a non-breakable space at the end of your text (ie. "uf "
).
Artifacts with SVG text animations (CSS3)
-
28-06-2022 - |
Pregunta
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:
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
Solución
Otros consejos
Not really a solution, but what helped me in similar cases (at least in Chrome) is the following dummy update:
jQuery('<style></style>').appendTo(jQuery("#gsegMapDiv")).remove();
Not overly elegant, but it forces Chrome to check its rendering - and with that removes the artifacts when triggered e.g. onmouseout in the above jsfiddle.