使用transform进行绝对定位元素的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间隙（或透明＆＃34;边框＆＃34;）：

预期结果（在Chrome，Firefox和IE上的显示方式）：

Demo in JSFiddle

Answer 1

我遇到了同样的问题，在仅使用Item { id: root property var dataset Component.onCompleted: { dataset = Qt.binding(function(){ return MediaWatcherHelper.formatDataset(internals.metadata); // I want this code to execute after the binding occurs, but I obviously can't execute things after the return. MediaWatcherHelper.detectChanges(root.dataset, internals.cache) .forEach(it => root[`${it}Change`](dataset[it])); internals.cache = root.dataset; // And update the cache }); } signal trackIdChange(string trackId) signal albumChange(string album) signal artistChange(var artist) signal titleChange(string title) signal urlChange(url url) } 而不是transform的情况下进行了切换。