css - CSS 变换缩放后 Safari 上的模糊 SVG

Question

我有一个在网站上使用的 SVG Logo 。我已经将一些 CSS 转换应用于 SVG 以进行缩放和翻译。它在 Chrome 和 Firefox 上完美运行，但桌面和 iOS 的 Safari 在第二次转换后呈现模糊的图像。 ( Codepen link )

$('.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 的一个错误。我找到了一种通过将比例更改为 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>