SVG blurry before and after CSS animation in Firefox
I want to animate parts of an SVG logo using CSS transforms. Unanimated SVG renders great, and everything looks crystal clear during animation.
However, in the fill state, that is, during the animation delay and after the animation ends, firefox blurs the animated part of the image completely.
The problem only occurs in Mozilla Firefox, both my Mac and Windows. In chrome and safari, it looks as intended.
#gull {
fill: #59E9CF;
-webkit-animation: gull-flight 5s linear 3s 1 normal both;
-moz-animation: gull-flight 5s linear 3s 1 normal both;
animation: gull-flight 5s linear 5s 1 normal both;
}
@keyframes gull-flight {
0% {
transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6);
fill: #404041;
}
100% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
@-webkit-keyframes gull-flight {
0% {
transform: matrix(0.976, -0.216, 0.216, 0.976, -9.5, 71.6);
fill: #404041;
}
100% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 808 138" version="1.1">
<path d="M11.0944925 129.4 L11.0944925 23.2 C11.0944925 20.3 9.6 18.8 6.5 18.7 L-0.00275138279 18.3 L-0.00275138279 3 L32.5369357 3 L32.5369357 46.8 C38.0855577 41.7 45.5 39.1 54.9 39.1 C66.4981706 39.1 75.7 43 82.5 50.8 C89.2337637 58.7 92.6 69.7 92.6 83.9 C92.6271358 119.5 77.7 137.3 47.9 137.3 C41.4789298 137.3 34.7 136.6 27.6 135 C20.5592493 133.5 15 131.6 11.1 129.4 M32.5369357 69.4 L32.5369357 117.4 C37.2234577 119.8 42.6 121.1 48.8 121.1 C62.8663453 121.1 69.9 109.6 69.9 86.8 C69.8915427 66 63 55.5 49.2 55.5 C44.743904 55.5 40.9 56.8 37.5 59.4 C34.2061079 62 32.5 65.3 32.5 69.4"
/>
<path d="M150.264937 17 C157.180079 18.5 161.5 22.4 163.2 28.6 C164.333674 32.6 164.6 37.6 164 43.5 L176.008708 55.3 L191.517336 49.9 C193.470818 44.1 196 39.6 199.3 36.2 C203.705962 31.6 209.4 30.1 216.3 31.7 C220.80122 32.7 224.2 34.7 226.5 37.6 L245.88466 30.8 C243.912835 28.4 241.4 25.9 238.4 23.6 C233.87946 20.1 228 17.6 220.8 16 C210.465192 13.7 200.3 14.8 190.3 19.4 C188.123964 20.5 186 21.9 184 23.5 C183.510812 22.1 182.9 20.8 182.2 19.6 C180.099097 15.9 176.8 12.4 172.3 8.9 C167.855444 5.4 162 2.9 154.8 1.3 C144.441176 -1 134.3 0.1 124.3 4.7 L137.938742 18.1 C141.478854 16.3 145.6 15.9 150.3 17"
id="gull" />
</svg>
I've folded the svg code to demonstrate that the "b" remains sharp, and the gull is blurred at first, then sharp as it moves and blurred again after animation. (hint: play full screen to see what I mean)
Any thoughts on this?
source to share
I think this is just a limitation of the current build. Similar to webGL or other edge materials - the browser just doesn't do it well - it's not really something you can fix, but something you are working on. Until it is finalized in future builds (note that there is no guarantee it will ever be ...) - you could try this transformZ envelope, or you could test it with modernizr and drop it into then, t look cool.