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

Question

我创建了一个模态框,并使用Chris Coyer提到的技术垂直居中.到目前为止,我发现它唯一的问题是有时候盒子会偏移半个像素,这可能会让一些孩子看起来有点不稳定.我的问题是:是否可以将结果捕捉到最近的整个像素？

更新

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

第二张图显示了使用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属性时) - 所以它的行为方式并不相同,这有点奇怪translate.

Answer 2

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

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

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

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