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 с позицией right: 35px .... on click i t изменяет класс на .class2 на позицию calc. Таким образом, в 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 Opera работает так, как должно. В Safari 9+ он отправляется в пункт назначения, а затем возвращается в какое-то место справа. Я не могу найти ошибку. Пробовал его с jquery, который еще больше сломался, также в FF и O ..

Answer 1

У Safari, похоже, проблема с «переход: все».

Решение было специально адресовать правильное свойство перехода.

Вместо

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

и все идет хорошо.