在Safari上模糊SVG后，CSS变换缩放

Question

我有一个在网站上使用的SVG徽标。我对SVG应用了一些CSS转换来进行缩放和转换。它在Chrome和Firefox上运行得很好，但是Safari桌面版和iOS版在第二次转换后呈现的图像都很模糊。(Codepen链接)

$('.click').click(function() {
  $('.svg').toggleClass('animated');
});

.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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me Twice</button>
<a href="#" class='svg'></a>

Answer 1

这显然是Safari的一个bug。我找到了一种方法，通过将比例更改为scale3d来解决它。问题是scale3d的最大值是(1,1,1)。所以基本上你需要缩小尺寸

代码现在是

$('.click').click(function() {
  $('.svg').toggleClass('animated');
});

.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: translate(-33%, 33%) scale3d(1, 1, 1);
      -ms-transform: translate(-33%, 33%) scale3d(1, 1, 1);
          transform: translate(-33%, 33%) scale3d(1, 1, 1);
  -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: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
      -ms-transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
          transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);
}
@-webkit-keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me Twice</button>
<a href="#" class='svg'></a>