safari calc（）left issues

Question

私は、ページの中央から右にアニメーション化されたボタンを持っています。

FFとOperaではうまく機能します。サファリでは、ページの真ん中に行き、その後サイドにジャンプします。

ボタンが

right:35px; 
width: 325px; 

次に位置を持っている、それが先にアニメ化されています

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

私はフォールバックを持って、私は-webkitを持って、まだそれが

にジャンプして戻ります

right:35px; 

私は実際に何が間違っているのかわかりません。ボタンは.class1の位置にあります：35px .... tはcalcの位置でクラスを.class2に変更します。だから、CSSで右から35pxについては何もありません...私は混乱しています。..

EDIT：

$("#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で、オペラはそれが必要なように機能します。 Safari 9以降では、目的地に行き、次に右の場所にジャンプします。私は間違いを見つけることができません。 FFやOでもjqueryを試してみました。

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; 

を使用し、すべてがうまく行きます。