带有转换的绝对定位元素的间距为1px:仅在Safari上翻译 [英] 1px gap of absolute positioned element with transform: translate on Safari only

问题描述

有一个全宽容器，其中包含位于容器内部居中的内部框.盒子内部有一个100％宽度的绝对定位盒子.在该框上还应用了transform:translate().

There is a full width container that contains inner box which are centered inside the container. There is a 100% width absolute positioned box inside the box. To the box also applied 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的间隙(或透明的边框"):

On odd sizes of window there is appeared 1px gap (or transparent "border") on Safari browser only:

预期结果(在Chrome，Firefox和IE上的外观):

JSFiddle中的演示

推荐答案

我遇到了同样的问题，只是使用 transform 而不是 transform3d 在我之间进行了切换

I ran into the same issue, switching between using just transform instead of transform3d fixed it for me.

这篇关于带有转换的绝对定位元素的间距为1px:仅在Safari上翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！