Safari calc() 遗留问题

Question

我有一个按钮，它是从页面右侧到中心的动画。

在FF和Opera中运行良好。在 safari 中，它会转到页面的中间，然后跳回页面的一侧。

按钮有位置

right:35px;
width: 325px;

然后用目的地动画：

right: 50%;
right: calc(50% - 325px/2);
right: -webkit-calc(50% - 325px/2px);

我得到了回退，我得到了-webkit，但它仍然跳回到

right:35px;

我真的不知道这里出了什么问题..按钮有 .class1 和位置 right:35px... 点击它会将 class 更改为 . class2 与计算位置。所以在 css 中没有关于右边 35px 的东西......我很困惑..

编辑：

$("#konf-menu").click(function() {
  $(".konf-button").addClass('konf-animation').removeClass('line-right');
});

.konf-animation {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-family: 'Dosis', sans-serif;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  top: 50%;
  margin-top: -200px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  z-index: 1006;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  top: calc(50% + 250px);
  right: 50%;
  right: calc(50% - 325px/2);
  right: -webkit-calc(50% - 325px/2);
  animation: konfi 1.8s;
  -moz-animation: konfi 1.8s;
  -webkit-animation: konfi 1.8s;
}
@keyframes konfi {
  0% {
    right: 0px;
  }
  90% {
    right: calc(45% -325px/2);
  }
  100% {
    right: calc(50% - 325px/2);
  }
}
.line-right {
  position: fixed;
  visibility: visible;
  display: block;
  width: 325px;
  font-family: 'Dosis', sans-serif;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  right: 35px;
  top: 50%;
  margin-top: -200px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  z-index: 1006;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<a class=" link-underline menu-btn nav-link color-head konf hide-menu" href="#konfigurator" id="konf-menu">Konfigurator</a>

<div class="line-right konf-button">
  <div class="button-subscribe-wrap ex-modal-launcher konfig-btn">
    <button class="button-subscribe navscroll">Angebotskonfigurator</button>
  </div>
</div>

EDIT2：这是暂时的代码。就像我说的，在 FF 中，Opera 可以正常运行。在 Safari 9+ 中，它会到达目的地，然后跳回右侧的某个位置。我找不到错误。用 jquery 试过，它更破烂，也在 FF 和 O..

Answer 1

Safari 似乎对“transition: all”有问题。

解决方案是专门解决正确的过渡-属性。

而不是

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;

我现在用

-webkit-transition: transform 0.7s;
-moz-transition: transform 0.7s;
-ms-transition: transform 0.7s;
-o-transition: transform 0.7s;
transition: transform 0.7s;

一切顺利。

Safari calc() 遗留问题

safari calc() left issues

css

safari

css-calc