CSS翻译后是否可以“捕捉到像素”？答案

【问题标题】：Is it possible to "snap to pixel" after a CSS translate?CSS翻译后是否可以“捕捉到像素”？
【发布时间】：2013-08-17 21:43:01
【问题描述】：

我创建了一个模态框并使用technique Chris Coyer mentioned 将其垂直居中。到目前为止，我发现它的唯一问题是有时该框偏移了半个像素，这会使一些孩子看起来有点不稳定。我的问题是：是否可以将结果捕捉到最近的整个像素？

更新

这里有几张图片可以更好地说明问题。在第一张图片中，您可以看到文本输入和链接下划线已正确呈现：

第二张图片显示了使用 CSS 转换后的效果。注意链接下划线的模糊和错误呈现的文本输入。

虽然第二张图片没有显示，但偶尔我会注意到顶部和底部的白线具有相同的模糊效果。

为了记录，文本输入的样式使用简单的边框和背景颜色。我在这里包含了这些输入的 CSS，所以你可以看到没有什么特别的事情发生：

input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    box-shadow: 0 1px 3px -1px #D5D5D5 inset;
    color: #4C4C4C;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    max-width: 100%;
    padding: 5px;
    transition: border-color 0.1s ease 0s;
}

【问题讨论】：

您能描述一下您所说的“孩子们看起来有点古怪”是什么意思吗？你在谈论抗锯齿问题吗？你能给我们看个截图或在 jsFiddle 中重现问题吗？
老实说，我几乎感觉不到这些差异。我使用了图像比较工具，实际上压缩伪影的差异比实际差异更多（因为您将屏幕截图保存为 JPEG）。如果您在 jsFiddle 中复制它会更容易回答您的问题。
你知道，我越看这个问题，我就越同意你，@brianpeiris。这个问题太小了，不用担心。
一年后——我仍然认为这是一个大问题，尤其是在处理页面上的许多图像时，在我的情况下，浏览器会出现 translateY(-50%) 或 translateX一个半像素 (-56.5) 的矩阵。想办法告诉所有浏览器只将翻译渲染到整个像素会很高兴
这仍然是我今天遇到的问题。尽管 OP 讨论了围绕转换的问题，但是当容器的高度是亚像素值时，您可能会遇到这个问题——我们通常使用 pt、em 或 rem 来定义字体大小，这会导致亚像素，这会影响多个容器的渲染。当您在所述容器中使用背景时，您最终会得到最明显的微弱线条。还没找到解决办法。回到像素大小是一种回归。

标签： css transform

【解决方案1】：

唯一的防弹解决方案是确保您的元素占据偶数个像素。如果高度（或宽度）不能被 2 整除，那么它将尝试在半像素上渲染您的元素，从而导致模糊。

Firefox 没有这个问题，因为它支持真正的亚像素渲染。因此，即使您的元素位于半像素上，Firefox 也会优雅地处理它。

根据我的经验，Webkit 通常会将元素捕捉到最近的像素——（例如，当使用 letter-spacing 属性时）——所以它与 translate 的行为方式不同，这有点奇怪。

【讨论】：

【解决方案2】：

在某些浏览器中，您可以避免使用 3d 变换而使用 2d 变换，默认情况下，平移会捕捉到像素：

transform: translate(-50%, -50%);

transform: translate3d(-50%, -50%, 0);

JSBin: http://jsbin.com/epijal/3/edit

【讨论】：

我正在使用 2D 变换，但我仍然可以得到效果。奇怪的是，在我的 Firefox (23) 版本中检查此页面上的链接显示两个演示都带有清晰的线条
我也只在 Chrome 中看到了抗锯齿问题。 Firefox 似乎有一种不同的渲染算法来解决这种情况（我认为）。
2D 变换将导致亚像素抗锯齿，奇数像素向左拉至 -50%。
第二个在 Chrome (61.0.3163.100) 上仍然模糊
在 Chrome 中使用 display: table 和非 3d translate 似乎可以提供最佳效果。

【解决方案3】：

由于我在 Chrome 中遇到了与亚像素相同的问题，并且在 64 版中它仍然无法处理亚像素变换值，我决定编写一个小的 js 脚本来修复亚像素问题。您可以在github 上找到它。它只是将变换值四舍五入为全像素。

希望有人会觉得它有帮助！

【讨论】：

【解决方案4】：

我总是用perspective: 1px;，例如：

{
  margin: 50% 0 0 50%;
  perspective: 1px;
 transform: translate(-50%, -50%);
}

【讨论】：