title: Blurry SVG on Safari After CSS transform scaling
body: <p>I have an SVG logo that I am using on a site. I have applied some CSS transforms to the SVG for scaling and translating. It works Chrome and Firefox perfectly, but Safari both desktop and iOS render a blurry image after the second transform. (<a href="http://codepen.io/micahmills/pen/zGbvyM" rel="nofollow">Codepen link</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.click').click(function() {
    $('.svg').toggleClass('animated');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.svg {
    display: block;
    width: 10em;
    height: 10em;
    position: absolute;
    top: 0;
    left: 50%;
    background: url("http://blessing.micahmills.net/wp-content/themes/BlessingTourism/library/images/svg/BlessingLogo.svg") no-repeat top center;
    background-size: contain;
    opacity: 0;
    -webkit-transform: scale(3) translate(0, 50%);
        -ms-transform: scale(3) translate(0, 50%);
            transform: scale(3) translate(0, 50%);
    -webkit-transition: -webkit-transform .5s;
            transition: transform .5s;
    /*animation: scale .75s linear 2.5s forwards;*/
    -webkit-animation: logoFadeIn .75s linear .5s forwards;
            animation: logoFadeIn .75s linear .5s forwards;
  }
  .svg.animated {
    -webkit-transform: scale(1) translate(0, -1.75em);
        -ms-transform: scale(1) translate(0, -1.75em);
            transform: scale(1) translate(0, -1.75em);
  }
  
  @-webkit-keyframes logoFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes logoFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="click"&gt;Click Me Twice&lt;/button&gt;
  &lt;a href="#" class='svg'&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>