safari calc() left issues

Question

I have a button, which is animated from right to the center of the page.

In FF and Opera it functions well. In safari it goes to the mid of the page and then jumps back to the side.

The button has the position

right:35px;
width: 325px;

Then it is animated with the destination:

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

I got the fallback, I got the -webkit, and still it jumps back to

right:35px;

I really don't know what is wrong here..The button has .class1 with position right:35px.... on click it changes the class to .class2 with the calc-position. So in css there is nothing about 35px from the right...I am confused..

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: This is the momentary code. Like I said, in FF, Opera it functions like it should. In Safari 9+ it goes to its destination, and then jumps back to some place on the right. I can't find the fault. Tried it with jquery, which is even more broke, also in FF and O..

Answer 1

Safari seems to have a problem with " transition: all ".

The solution was to specifically adress the right transition-property.

Instead of

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

I now used

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

and everything goes fine.