溢出的像素错误：隐藏和变换：翻译答案

【问题标题】：pixel error with overflow: hidden and transform: translate溢出的像素错误：隐藏和变换：翻译
【发布时间】：2016-04-07 23:20:35
【问题描述】：

我有一个带有标题的框，它是position: absolute，并用top: 100% 隐藏。标题的父级具有overflow: hidden。当我将框悬停时，标题会向上滑动，因此完全可见。

现在的问题是，在此过渡期间，存在一个像素错误。这意味着过渡期间的标题比父框宽 1 个像素。过渡后一切看起来都很好。

它出现在 Windows 8.1 上的 IE 11 和 Mac 10.11.2 上的 Webkit 浏览器中。

您应该在this fiddle 中看到这种效果。当您没有看到像素错误时，请尝试调整窗口大小。

您还会在屏幕截图上看到错误。

我已经尝试过：

【问题讨论】：

【解决方案1】：

我之前遇到过这个错误。像素错误是由 transform:translate 引起的。

在父元素上试试这个。

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

【讨论】：

【解决方案2】：

我将尝试使用以下选项之一：

位置：相对；

-webkit-transform: translateZ(0px);

-webkit-font-smoothing: 亚像素抗锯齿；或 webkit-font-smoothing: 抗锯齿

【讨论】：