CSS翻译后可以“捕捉到像素”吗？

Question

我创建了一个模态框，并使用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;
}

Answer 1

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

Firefox没有此问题，因为它支持真正的子像素渲染。因此，即使你的元素是半像素，Firefox也会优雅地处理它。

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

Answer 2

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

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

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

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

Answer 3

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

希望有人会发现它有用！

Answer 4

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

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