translate3d имеет несовместимое поведение в Safari против Chrome/Firefox при использовании перспективы

Question

При использовании translate3d для перемещения объекта с абсолютным позиционированием, а также при использовании перспективы для изменения представления translate3d Safari не работает так же, как другие браузеры.

Изображение с визуальным представлением вопроса

Если объект не позиционируется абсолютно, проблема не возникает, и Safari функционирует так же, как и другие браузеры.

Кодовый пример для примера просмотра в Safari против Chrome

редактировать: я забыл упомянуть, что проблема Safari также относится к контенту внутри объекта с применением translate3d. Содержимое внутри, например ссылки или кнопки, нельзя щелкнуть в месте визуального представления, вместо этого оно находится там, где визуальное "должно" быть. Я добавил кнопку для кодовой булавки и код для демонстрации.

jQuery(document).ready(function($) {
  $(".clickme").click(function() {
    $("body").toggleClass("toggle");
  });
});

body {
  margin: 0;
}
.outer-box {
  perspective: 900px;
}
.box {
  padding: 100px 15%;
  background: #000;
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  overflow: scroll;
  box-sizing: border-box;
  text-align: center;
}
.toggle .box {
  transform: translate3d(0px, 100px, -200px);
}
.clickme {
  cursor: pointer;
  float: right;
  position: relative;
  z-index: 1;
  background: pink;
  padding: 20px;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickme">X</div>
<div class="outer-box">
  <div class="box">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo.<br><button>Click Me!</button></div>
</div>