Safari animation (keyframes and transform) set wrong positions
<p>I have a weird issue only on Safari (strange? LOL). Doesn't matter if you are on iPhone, iPad or Desktop Mac; <strong>Safari</strong> makes a wrong calculation positioning a logo, using <strong>animation keyframes and transform</strong>.</p>

<p>The issue is that logo needs to move to his room, but on safari the logo goes <strong>too to the left</strong>, and when the keyframes reach 100% the logo fits on his room perfectly.</p>

<p>You can see the weird effect on: <a href="https://amonarraiz.com" rel="noreferrer">https://amonarraiz.com</a> (visit on Safari is different than visit on another browser, the code is the same).</p>

<p>Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.intro-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.intro-logo {
  background: url(https://amonarraiz.com/css/img/slider/2.png) center center no-repeat;
  background-size: cover;
  width: 50rem;
  height: 41rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-86%, -52%);
  -webkit-transform: translate(-86%, -52%);
  transform: translate(-86%, -52%);
  opacity: 0;
  cursor: pointer;
}

.intro-in {
  -moz-animation-duration: 3.75s;
  -webkit-animation-duration: 3.75s;
  animation-duration: 3.75s;
  -moz-animation-name: intro-in;
  -webkit-animation-name: intro-in;
  animation-name: intro-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-moz-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}

@-webkit-keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}

@keyframes intro-in {
  0% {
    opacity: 0.6;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  30% {
    opacity: 1;
    width: 50rem;
    height: 41rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 1;
    width: 25.6rem;
    height: 19.5rem;
    -ms-transform: translate(-106%, -46%);
    -webkit-transform: translate(-106%, -46%);
    transform: translate(-106%, -46%);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="intro-wrapper"&gt;
  &lt;div class="intro-logo intro-in"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I don't know what is the problem here. All browsers render it perfectly (including Google Chrome's emulator), but Safari (iOS / Mac) is unable to render it in the right way while the animation is running (when animation ends, the logo sit on his room).</p>

<p>If you need more details, please, tell me and I add them as soon as possible.</p>

<p>Thank you.</p>

<h2>Edit</h2>

<p>I will add a bounty because this have no enough attention </p>