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

问题描述

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

更新

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

第二个图像显示使用CSS变换后的效果。请注意链接下划线的模糊和不正确呈现的文本输入。

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

对于记录，文本输入使用简单边框和背景颜色设置样式。我在这里包含了这些输入的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不会有这个问题，因为它支持真正的子像素渲染。

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

I created a modal box and vertically centred it using a technique Chris Coyer mentioned. The only problem I've found with it so far is that sometimes the box is offset by half a pixel, which can make some of the children look a little wonky. My question is,: is it possible to snap the result to the nearest whole pixel?

Update

Here are a couple of pictures to better illustrate the issue. In this first image, you can see the text inputs and link underlines have rendered correctly:

The second image shows the effect after the CSS transforms have been used. Notice the blur of the link underline and the incorrectly rendered text inputs.

Although the second image doesn't show it, occasionally I notice the top and bottom white lines wit the same blurred effect.

For the record, the text inputs are styled using simple borders and a background colour. I've included the CSS for those inputs here so you can see there's nothing special happening:

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;
}

解决方案

The only bulletproof solution is to ensure that your element occupies an even number of pixels. If the height (or width) is not divisible by 2, then it will attempt to render your element on a half-pixel, causing the blurriness.

Firefox doesn't have this issue because it supports true subpixel rendering. So, even though your element is on a half-pixel, Firefox handles it elegantly.

In my experience, Webkit typically snaps elements to the nearest pixel –– (for instance, when using the letter-spacing property) -- so it's kinda strange that it doesn't behave the same way for translate.

这篇关于可以“捕捉到像素”后CSS翻译？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！