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

Posted 2023-03-06

【中文标题】溢出的像素错误：隐藏和变换：翻译

【英文标题】：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 像素 添加overflow-x: hidden 添加translate3d

【问题讨论】：

实际上我看不到错误，你能拍几张这个像素错误的截图吗？

我没有看到它 (Chrome / Mac 10.11.2) - 你能提供截图吗？

@RyanLittle 我上传了一张截图。截图是用ie做的，但是在其他浏览器上是这样的。

【参考方案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: 抗锯齿

【讨论】：

无法在我当前使用的机器上进行复制。如果我今晚有时间我会尝试从其他机器上。

你不应该使用字体平滑这不是标准的：developer.mozilla.org/en-US/docs/Web/CSS/font-smooth