14

When scaling an SVG image using CSS scale transform, the image gets blurred under Chrome or Safari?

Here is a bit of my code:

        #logo {
            animation: cssAnimation 120s infinite;
            -webkit-animation: cssAnimation 120s infinite;
            -moz-animation: cssAnimation 120s infinite;
        }

        @keyframes cssAnimation {
            0% { transform: scale(1) }
            50% { transform: scale(2) }
            100% { transform: scale(1); }
        }

Many thanks for any help!

Raphaël

RaphArbuz
  • 869
  • 1
  • 9
  • 19
  • 1
    See if http://stackoverflow.com/questions/26488179/images-losing-quality-for-second-when-interacting-with-page or http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t answers your question... – War10ck Oct 22 '14 at 17:21
  • try using `width` http://jsfiddle.net/victor_007/bw0fyu11/ – Vitorino fernandes Oct 22 '14 at 17:34
  • @Vitorino Fernandes thanks but width made the animation jumpy – RaphArbuz Oct 22 '14 at 22:12
  • 1
    I have to scale a svg logo image 200 times larger and the only solution I got is to use width instead, scale3d won't make any difference. – user1455180 Oct 15 '20 at 03:14

1 Answers1

6

Thanks a lot War10ck! This article helped me: when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border Using scale3d instead of scale, not going over 1, made the trick!

Community
  • 1
  • 1
RaphArbuz
  • 869
  • 1
  • 9
  • 19