javascript CSS3 转换导致屏幕闪烁或字体锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6843367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transforms cause screen flickering or aliased font
提问by wnkz
I am trying to apply some CSS3 transformations on elements and there is two problems. The webpage contains lots of sticky notes and I want to zoom on click (scale) or flip on hover (rotateY) them by applying CSS classes with some JavaScript.
我正在尝试对元素应用一些 CSS3 转换，但有两个问题。该网页包含许多便利贴，我想通过使用一些 JavaScript 应用 CSS 类来放大单击（缩放）或在悬停时翻转（旋转）它们。
For example the zoom class is like this :
例如缩放类是这样的：
.postit-container.enabled {
z-index: 15;
-webkit-transition: -webkit-transform 0.15s ease-in-out;
-moz-transition: -moz-transform 0.15s ease-in-out;
-o-transition: -o-transform 0.15s ease-in-out;
-ms-transition: -ms-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
For the flip effect I only use rotateY(180deg)on :hover.
对于翻转效果，我只使用rotateY(180deg)on :hover。
Every stickies has a default rotation of 6deg applied and I fake random rotation with the nth-childCSS3 selector to apply different rotations.
每个即时贴都应用了 6 度的默认旋转，我使用nth-childCSS3 选择器伪造随机旋转以应用不同的旋转。
Problem is that the screen flickers randomly when zooming or flipping andsome fonts on the page are altered and looks ugly but not all of them, that's really weird.
问题是，缩放或翻转时，屏幕闪烁，随机和页面上的某些字体被改变，长相丑陋，但不是所有的人，这真是不可思议。
Here is a jsfiddle so you can see the problem yourself :
这是一个 jsfiddle，因此您可以自己查看问题：
JSfiddle(tested with Google Chrome 12.0.742.122 on Mac OS X 10.6.8)
JSfiddle（在 Mac OS X 10.6.8 上用 Google Chrome 12.0.742.122 测试）
I already tried the -webkit-backface-visibilitytrick, the flicker is gone on aminations and transforms for sure butfonts look ugly all the time.
我已经尝试过了-webkit-backface-visibility招，忽悠走了上胺化和变换肯定的，但字体看起来丑陋所有的时间。
I hope someone has a magic trick, because I really don't understand this behavior.
我希望有人有一个魔术，因为我真的不明白这种行为。
采纳答案by AshHeskes
Could you put examples into a jsfiddle, the screenshots do not do a good job of illustrating the problem.
您能否将示例放入 jsfiddle 中，屏幕截图并不能很好地说明问题。
However I have experienced a similar problem, I couldn't find the cause of the problem either. Or come up with an explanation as to what might be happening.
但是我遇到了类似的问题，我也找不到问题的原因。或者对可能发生的事情做出解释。
However I did find a solution that worked in my case.
但是，我确实找到了适用于我的案例的解决方案。
-webkit-transform-style: preserve-3d;
I applied it on all the elements that seemed to have rendering issues. In my case some elements that where not being transitioned or even in the same container, where being effected in a seemingly random and inconsistent manner.
我将它应用于似乎有渲染问题的所有元素。在我的情况下，一些元素没有被转换，甚至在同一个容器中，以一种看似随机和不一致的方式受到影响。
something like.
就像是。
.header *, .sticky * {
-webkit-transform-style: preserve-3d;
}
I would love provide an explanation as to what preserve-3d does, however I found the documentation pretty ambiguous.
我很想解释一下preserve-3d 的作用，但是我发现文档非常含糊。
About the crux of what I gathered is that it may fix the problem ( which it did ) and it has two properties
我收集到的关键是它可以解决问题（它确实做到了）并且它有两个属性
-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;
Flat is used by default.
默认使用平面。
Sorry I could not give a more detailed answer, but I hope this fixes the problem for you.
抱歉，我无法给出更详细的答案，但我希望这可以为您解决问题。
If anyone working on webKit is around, can you provide and explanation as to what this really does.
如果有人在 webKit 上工作，您能否提供并解释它的真正作用。
回答by Semyazas
Try to add the following to your CSS:
尝试将以下内容添加到您的 CSS：
-webkit-transform: translateZ(0);
this will force Hardware Acceleration for chrome, since chrome often decides to not use it based on the CSS
这将强制 chrome 硬件加速，因为 chrome 通常决定不使用它基于 CSS
回答by Artem Medvedev
I have the same problem. Found solution very long time, but finally I found it.
我也有同样的问题。找到解决方案很长时间，但最后我找到了。
Just add class .no-flickrto any problem object on your site and you see correct animation without any bugs.
只需将类添加.no-flickr到您网站上的任何问题对象，您就会看到正确的动画而没有任何错误。
See this http://jsfiddle.net/DaPsn/92/
看到这个http://jsfiddle.net/DaPsn/92/
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
回答by bjornd
I see your text is just antialiased. Try to add 3d transform for example rotateZ(0)to fix that.
我看到你的文字只是抗锯齿。例如尝试添加 3d 变换rotateZ(0)来解决这个问题。
