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

Question

我有一个带有标题的盒子,它是position: absolute隐藏的top: 100%.标题的父母有overflow: hidden.当我将鼠标悬停在盒子上时,标题会向上滑动,使其完全可见.

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

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

你应该在这个小提琴中看到这种效果.当您没有看到像素错误时,请尝试调整窗口大小.

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

我已经尝试过:

• 将标题设置为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：子像素抗锯齿；或 webkit-font-smoothing: 抗锯齿