html - 像素错误溢出 : hidden and transform: translate

Question

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

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

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

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

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

我已经尝试过:

• 将标题设置为宽 1 个像素
• 添加overflow-x: hidden
• 添加translate3d

Answer 1

我以前遇到过这个错误。像素错误是由转换引起的:翻译。

在父元素上试试这个。

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

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

transform-style: preserve-3d;