blocks|key|1625807|text|在某些浏览器中，您可以避免3d转换，而使用2d转换，默认情况下，转换会切换到像素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1625808|transform:+translate(-50%25,+-50%25);|code-block|syntax|javascript|1625809|​|1625810|📷|atomic|offset|length|1625811|1625812|transform:+translate3d(-50%25,+-50%25,+0);|1625813|1625814|1625815|1625816|JSBin:+http://jsbin.com/epijal/3/edit|style|BOLD|1625817|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/cbb6572b964a70adc096bfd86b09e864.png|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/0d3ad04969d5899dc8309b33b98b0636.png|2|LINK|MUTABLE|url|http://jsbin.com/epijal/3/edit^0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0|6|7|U|2|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1F|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1G|8|@]|9|@$L|1H|M|1I|1|1J]]|A|$]]|$1|N|3|H|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|Q|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|R|3|J|5|K|7|1N|8|@]|9|@$L|1O|M|1P|1|1Q]]|A|$]]|$1|S|3|H|5|6|7|1R|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1S|8|@$L|1T|M|1U|V|W]]|9|@$L|1V|M|1W|1|1X]]|A|$]]|$1|X|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|10|11|12|A|$13|17|15|-4]]|18|$5|19|11|1A|A|$1B|1C]]]]

In some browsers you can avoid 3d transforms and use 2d transforms instead, the translation will snap to pixels by default:

<pre><code>transform: translate(-50%, -50%);
</code></pre>

<img src="https://i.stack.imgur.com/HnNo2.png" alt="rendering is snapped to pixels">

<pre><code>transform: translate3d(-50%, -50%, 0);
</code></pre>

<img src="https://i.stack.imgur.com/Hwh03.png" alt="rendering is anti-aliased">

JSBin: <a href="http://jsbin.com/epijal/3/edit" rel="nofollow noreferrer">http://jsbin.com/epijal/3/edit</a>

blocks|key|1625877|text|唯一的防弹解决方案是确保元素占用偶数像素。如果高度(或宽度)不能被2整除，那么它将尝试在半像素上呈现元素，从而导致模糊。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1625878|Firefox没有这个问题，因为它支持真正的亚像素呈现。因此，即使您的元素位于半像素上，Firefox也能优雅地处理它。|1625879|根据我的经验，Webkit通常会将元素截取到最近的像素--例如，当使用letter-spacing属性时)--所以对于translate来说，它的行为方式不一样有点奇怪。|offset|length|style|CODE|1625880|entityMap^0|0|0|Z|E|1N|9|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@$F|O|G|P|H|I]|$F|Q|G|R|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

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 <code>letter-spacing</code> property) -- so it's kinda strange that it doesn't behave the same way for <code>translate</code>.

blocks|key|2946686|text|由于我在Chrome中遇到了同样的子像素问题，而在64版中，它仍然不能处理亚像素转换值，所以我决定编写一个小的js脚本来解决亚像素问题。你可以在github上找到它。它只是将转换值舍入到全像素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2946687|​|2946688|📷|atomic|2946689|2946690|希望有人会发现它有帮助！|2946691|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/engray/subpixelFix|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/686d3063a50556fec0588a64e74205e2.png|imageAlt^0|20|6|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|I|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|U|P|V|C|$W|X|Y|-4]]]]

As I encountered same problem with subpixels in Chrome and in version 64 it still can't handle subpixel transform values , I decided to write small js script, that fixes subpixel problem. 
You can find it on <a href="https://github.com/engray/subpixelFix" rel="nofollow noreferrer">github</a>. It simply rounds transform value to full pixel.

<a href="https://i.stack.imgur.com/jKWYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jKWYK.png" alt="how subpixel works"></a>

Hope someone will find it helpful!

blocks|key|548289|text|我总是使用perspective:+1px;，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|548290|{
++margin:+50%25+0+0+50%25;
++perspective:+1px;
+transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|548291|entityMap^0|5|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I always use <code>perspective: 1px;</code>, for example:

<pre><code>{
 margin: 50% 0 0 50%;
 perspective: 1px;
 transform: translate(-50%, -50%);
}
</code></pre>

I created a modal box and vertically centred it using a <a href="http://css-tricks.com/centering-percentage-widthheight-elements/" rel="noreferrer">technique Chris Coyer mentioned</a>. 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:

<img src="https://i.stack.imgur.com/xiP6K.jpg" alt="Modal box with crisp lines">

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.

<img src="https://i.stack.imgur.com/XbPxP.jpg" alt="enter image description here">

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:

<pre><code>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;
}
</code></pre>

Is it possible to "snap to pixel" after a CSS translate?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我创建了一个模态盒，并使用垂直地以它为中心。到目前为止，我发现的唯一问题是，有时这个盒子会被半像素抵消，这会让一些孩子看起来有点摇摇欲坠。我的问题是:能不能把结果拍成最接近的整个像素？更新以下是一些图片，以更好地说明这一问题。在第一个图像中，您可以看到文本输入和链接下划线已正确呈现：​​第二个图像显示使用CSS转换后的...

问在CSS转换后，是否有可能“切换到像素”？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS转换后，是否有可能“切换到像素”？EN