溢出的像素错误：隐藏和转换：翻译

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

之前我遇到过此错误。像素错误是由transform：translate。

引起的

在父元素上尝试此操作。

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

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

transform-style: preserve-3d;

Answer 2

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

职位：相对;

-webkit-transform：translateZ（0px）;

-webkit-font-smoothing：subpixel-antialiased;或webkit-font-smoothing：antialiased