Safari动画（关键帧和变换）设置错误的位置

时间：2016-10-27 12:00:25

标签： css safari css-animations css-transforms mobile-webkit

我只在Safari上有一个奇怪的问题（奇怪？LOL）。如果您使用的是iPhone，iPad或桌面Mac，则无所谓; Safari 使用动画关键帧和转换进行错误的计算定位徽标。

问题是徽标需要移动到他的房间，但在safari上，徽标向左，当关键帧达到100％时，徽标完全适合他的房间。

您可以在https://amonarraiz.com上看到奇怪的效果（在Safari上访问与在其他浏览器上访问不同，代码是相同的）。

这是我的代码：

＆＃13;
＆＃13; 
.intro-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.intro-logo {
  background: url(https://amonarraiz.com/css/img/slider/2.png) center center no-repeat;
  background-size: cover;
  width: 50rem;
  height: 41rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-86%, -52%);
  -webkit-transform: translate(-86%, -52%);
  transform: translate(-86%, -52%);
  opacity: 0;
  cursor: pointer;
}

.intro-in {
  -moz-animation-duration: 3.75s;
  -webkit-animation-duration: 3.75s;
  animation-duration: 3.75s;
  -moz-animation-name: intro-in;
  -webkit-animation-name: intro-in;
  animation-name: intro-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-moz-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}

@-webkit-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}

@keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}
＆＃13; 
<div class="intro-wrapper">
  <div class="intro-logo intro-in"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我不知道这里有什么问题。所有浏览器都能完美呈现它（包括谷歌Chrome浏览器的模拟器），但Safari（iOS / Mac）无法在动画运行时以正确的方式呈现它（动画结束时，徽标就位于他的房间）。

如果您需要更多详情，请告诉我并尽快添加。

谢谢。

修改

我会添加赏金，因为这没有足够的关注

1 个答案:

答案 0 :(得分：2)

您使用translate百分比值，根据其宽度和高度计算元素的位置。但宽度和高度也随动画而变化。在我看来，这可能是一个Safari bug，它根据初始宽度和高度计算翻译。

您有两种解决方法可供选择。转换时使用scale或使用具体单位进行距离。如果你想使用比例，你必须改变一些数字，我不知道它究竟是如何工作的。

如果您在动画中使用rem而不是百分比，则可以使用：

.intro-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.intro-logo {
  background: url(https://amonarraiz.com/css/img/slider/2.png) center center no-repeat;
  background-size: cover;
  width: 50rem;
  height: 41rem;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  cursor: pointer;
}
.intro-in {
  -moz-animation-duration: 3.75s;
  -webkit-animation-duration: 3.75s;
  animation-duration: 3.75s;
  -moz-animation-name: intro-in;
  -webkit-animation-name: intro-in;
  animation-name: intro-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-moz-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-27.136rem, -8.97rem);
    -webkit-transform: translate(-27.136rem, -8.97rem);
    transform: translate(-27.136rem, -8.97rem);
  }
}
@-webkit-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-27.136rem, -8.97rem);
    -webkit-transform: translate(-27.136rem, -8.97rem);
    transform: translate(-27.136rem, -8.97rem);
  }
}
@keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-25rem, -21.5rem);
    -webkit-transform: translate(-25rem, -21.5rem);
    transform: translate(-25rem, -21.5rem);
  }
  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-27.136rem, -8.97rem);
    -webkit-transform: translate(-27.136rem, -8.97rem);
    transform: translate(-27.136rem, -8.97rem);
  }
}
<div class="intro-wrapper">
  <div class="intro-logo intro-in"></div>
</div>

相关问题
最新问题