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

Question

有一个全宽容器，其中包含位于容器内部中心的内盒。盒子里面有一个 100% 宽度的绝对定位盒子。对盒子也应用了变换：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 浏览器上出现奇数大小的窗口（或透明“边框”）：

预期结果（在 Chrome、Firefox 和 IE 上的显示效果）：

Demo in JSFiddle

Answer 1

我遇到了同样的问题，在使用 transform 而不是 transform3d 之间切换为我解决了这个问题。