在CSS转换后，是否有可能“切换到像素”？
我创建了一个模态盒，并使用克里斯·科耶提到的技术垂直地以它为中心。到目前为止，我发现的唯一问题是，有时这个盒子会被半像素抵消，这会让一些孩子看起来有点摇摇欲坠。我的问题是:能不能把结果拍成最接近的整个像素？
更新
以下是一些图片，以更好地说明这一问题。在第一个图像中，您可以看到文本输入和链接下划线已正确呈现：
第二个图像显示使用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;
}回答 4
Stack Overflow用户
发布于 2014-05-07 21:09:52
唯一的防弹解决方案是确保元素占用偶数像素。如果高度(或宽度)不能被2整除，那么它将尝试在半像素上呈现元素，从而导致模糊。
Firefox没有这个问题，因为它支持真正的亚像素呈现。因此，即使您的元素位于半像素上，Firefox也能优雅地处理它。
根据我的经验，Webkit通常会将元素截取到最近的像素--例如，当使用letter-spacing属性时)--所以对于translate来说，它的行为方式不一样有点奇怪。
Stack Overflow用户
发布于 2013-08-15 18:23:02
在某些浏览器中，您可以避免3d转换，而使用2d转换，默认情况下，转换会切换到像素：
transform: translate(-50%, -50%);
transform: translate3d(-50%, -50%, 0);
JSBin: http://jsbin.com/epijal/3/edit
Stack Overflow用户
发布于 2018-02-26 16:20:00
由于我在Chrome中遇到了同样的子像素问题，而在64版中，它仍然不能处理亚像素转换值，所以我决定编写一个小的js脚本来解决亚像素问题。你可以在github上找到它。它只是将转换值舍入到全像素。
希望有人会发现它有帮助！
https://stackoverflow.com/questions/18257132
复制相似问题
腾讯云开发者
