css - 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;

ここで何が問題なのか本当にわかりません..ボタンには位置right:35pxの.class1があります....クリックすると、クラスがcalc-positionで.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 以降では、目的地に移動してから、右側のどこかにジャンプして戻ります。私は障害を見つけることができません。FFとOでも、さらに壊れたjqueryで試してみました..