[1px带有转换的绝对定位元素的间隙：仅在Safari上翻译

Question

[有一个全宽容器，其中包含位于容器内部居中的内部框。盒子内部有一个100％宽度的绝对定位盒子。在框中还应用了transform：translate（）。

HTML：

<div class="cover-holder">
    <div class="cover">
        <div class="cover__overlay"></div>
    </div>
</div>

CSS：

.cover-holder {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
}

.cover {
  width: 206px;
  height: 206px;
  background: white;
  position: relative;
  overflow: hidden;
  align-self: center;
}

.cover__overlay {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  transition-duration: 0.3s;
  transform: translate3d(0, 50%, 0);
}

.cover:hover .cover__overlay {
  transform: translate3d(0, 0, 0);
}

问题：

在奇数大小的窗口上，仅在Safari浏览器上出现了1px的间隙（或透明的“边框”）：

预期结果（在Chrome，Firefox和IE上的外观：]

Demo in JSFiddle

Answer 1

我遇到了同样的问题，在仅使用transform而不是transform3d的情况下为我解决了这个问题。