CSS翻译后是否可以“捕捉到像素”?

前端之家收集整理的这篇文章主要介绍了CSS翻译后是否可以“捕捉到像素”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个模态框并使用 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;
}

解决方法

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

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

根据我的经验,Webkit通常将元素捕捉到最近的像素 – (例如,当使用字母间距属性时) – 所以有点奇怪的是它对于翻译的行为方式不同。

原文链接:https://www.f2er.com/css/218014.html

猜你在找的CSS相关文章