Safari转换宽度和位置，不重新计算

Question

如果我在safari中使用top，right，transform和width移动和放大元素，它在第一次转换时不会平滑移动。它将根据我假设的旧宽度进行转换，然后一旦完成它重新定位元素。无论如何过渡它都可以。

通过查看它可能更容易理解：

https://codepen.io/miketricking/pen/zZJZLR

<section class="container">

<div id="wrapper">
 <div id="card">
  <h3>click here</h3>
 </div>
</div>

</section>


.container { 
  width: 550px;
  height: 250px;
  position: relative;
  background-color: teal;
}

#wrapper {
  height: 20%;
  width: 20%;
  top: 0;
  right: 0;
  position: absolute;
  transition: all 1s ease;
 }

#wrapper.center {
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 50%;
 }

#card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 1s ease;
}


h3 {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

我真的迷失了这个。我可以看到问题根本不知道如何解决它。