Css 带变换的绝对定位元素的1px间隙：仅在Safari上平移

有一个全宽容器，其中包含位于容器中心的内框。盒子内有一个100%宽度的绝对定位盒子。对长方体也应用了transform:translate（）

HTML:

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

.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);
}

问题：

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

.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上的外观）：

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

.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);
}

---

我遇到了同样的问题，在使用

transform

而不是

transform3d

之间切换，为我修复了它。

我遇到了同样的问题，在使用

transform

而不是

transform3d

之间切换，为我修复了它。

你使用的是什么Safari版本，你能给出一个特定的像素范围的窗口宽度/高度，你看到的边界显示？我正在查看Safari 10.1.1，我正在将您的小提琴的结果面板调整为各种大小，但我从未看到边界显示。您好@cjl750我尝试了不同的设备：在OS X El Capitan上的真实设备-Safari 10.11.6，在BrowserStack上-在El Capitan上的Safari 9.1和在Sierra上的Safari 10.1。关于窗口大小，您可以很容易地注意到调整窗口大小的问题…您使用的Safari版本是什么，您能否给出显示边框的窗口宽度/高度的特定像素范围？我正在查看Safari 10.1.1，我正在将您的小提琴的结果面板调整为各种大小，但我从未看到边界显示。您好@cjl750我尝试了不同的设备：在OS X El Capitan上的真实设备-Safari 10.11.6，在BrowserStack上-在El Capitan上的Safari 9.1和在Sierra上的Safari 10.1。关于窗口大小，您可以很容易地注意到调整窗口大小的问题。。。