Javascript 通过 translate3d 基于 Webkit 的模糊/扭曲文本后期动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6411361/
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
Webkit-based blurry/distorted text post-animation via translate3d
提问by Mike
This issue appears to affect all WebKit-based browsers, including the iPhone.
此问题似乎会影响所有基于 WebKit 的浏览器，包括 iPhone。
First some background. The site I'm working on uses a JavaScript-based 'slider' animation.
首先介绍一下背景。我正在处理的站点使用基于 JavaScript 的“滑块”动画。
I'm using -webkit-transform: translate3dto 'power' the actual animation. When using this method, as opposed to a JavaScript-based method, the text becomes all blurry once the content has been animated. This is especially noticeable on the iPhone.
我正在使用-webkit-transform: translate3d“驱动”实际动画。与基于 JavaScript 的方法相反，使用此方法时，一旦内容被动画化，文本就会变得模糊。这在 iPhone 上尤为明显。
A few workarounds I saw were to remove an relative positioning, which I did, and to add a rule for -webkit-font-smoothing: antialiased, which I also did. Neither change made the slightest difference.
我看到的一些解决方法是删除相对定位，我这样做了，并添加了一个规则-webkit-font-smoothing: antialiased，我也这样做了。这两种变化都没有产生丝毫的不同。
The onlyway I could make this work properly without blurry text was to use regular JavaScript for the animation and bypass the translate3daltogether. I'd prefer to use translate3dbecause it performs muchfaster on WebKit-enabled devices, but for the life of me I cannot figure out why it is affecting the text in such a poor way.
我可以在没有模糊文本的情况下正常工作的唯一方法是使用常规 JavaScript 制作动画并translate3d完全绕过。我更喜欢使用translate3d它，因为它在支持 WebKit 的设备上执行得更快，但在我的生活中，我无法弄清楚为什么它会以如此糟糕的方式影响文本。
Any suggestions or solutions would be greatly appreciated.
任何建议或解决方案将不胜感激。
采纳答案by kizu
As @Robert mentioned above, sometimes adding background helps, but not always.
正如@Robert 上面提到的，有时添加背景会有所帮助，但并非总是如此。
So, for the example Dmitry added that's not the only thing you must do: except from the background, you must tell browser to explicitly use the proper anti-aliasing, so, there is a fixed Dmitry's example: http://jsfiddle.net/PtDVF/1/
因此，对于 Dmitry 添加的示例，这不是您必须做的唯一事情：除了在后台，您必须告诉浏览器明确使用正确的抗锯齿，因此，有一个固定的 Dmitry 示例：http: //jsfiddle.net /PTDVF/1/
You need to add these styles around (or for the) blocks where you need to fix the anti-aliasing:
您需要在需要修复抗锯齿的块周围（或为）添加这些样式：
background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;
回答by peter waldock
None of these seem to have worked for me but I've found a slightly dirty solution which seemed to do the trick:
这些似乎都不适合我，但我找到了一个有点脏的解决方案，它似乎可以解决问题：
top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
回答by Njaal Gjerde
I had the exact same problem described in Ken Avila's post: CSS: transform: translate(-50%, -50%) makes texts blurry
我在 Ken Avila 的帖子中遇到了完全相同的问题：CSS: transform: translate(-50%, -50%) 使文本变得模糊
The problem was of course that I used transform: translate(-50%, -50%) which made my centered content become blurry, but only in safari on osx.
问题当然是我使用了 transform: translate(-50%, -50%) 这使我的居中内容变得模糊，但仅限于 osx 上的 safari。
It is not only the text that becomes blurry, but the entire content, including images. I read on: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/that the "blurryness" is due to that the element is rendered on a non-integer boundary.
变得模糊的不仅是文本，还有整个内容，包括图像。我继续阅读：http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/，“模糊”是由于元素在非整数边界上呈现。
I also discovered that I could avoid using transform translate on the horizontal part of my centering from this post: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed-The only minus was that I had to introduce a wrapper.
我还发现我可以避免在这篇文章的居中水平部分使用变换翻译：https: //coderwall.com/p/qutdq/how-to-really-center-an-html-element-via-css -position-absolute-fixed-唯一的缺点是我不得不引入一个包装器。
I discovered that using transform: translateY(-50%) didn't create any "bluryness", maybe because my element has a set height and thus does not end up rendering on a non-integer boundary.
我发现使用 transform: translateY(-50%) 没有创建任何“模糊”，可能是因为我的元素有一个设定的高度，因此最终不会在非整数边界上呈现。
My solution therefore ended up like this:
因此，我的解决方案最终是这样的：
.wrapper {
position: fixed;
left: 50%;
top: 50%;
}
.centered {
position: relative;
left: -50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<div class="wrapper">
<div class="centered">
Content
</div>
</div>回答by factorypolaris
Elements you are translating must be divisible by two with even numbers.
您正在翻译的元素必须能被两个偶数整除。
I'ts important that whatever element you're trying to shift over by half is divisible by two for both it's width and height. Very similar to the responsive images, when things can be moved by 50% without splitting pixels.
重要的是，无论您想要移动一半的任何元素，它的宽度和高度都可以被 2 整除。与响应式图像非常相似，可以在不分割像素的情况下将物体移动 50%。
A div with a width of: 503px and a height of 500px will cause blurring, no matter which way you move it or by how much when using translateX or Y. Using transform, it utilizes GPU graphics accelerator which should result is very crisp, smooth edges. It might also be a good idea to set box-sizing: border-box; to ensure calculated widths include padding and borders.
宽度为：503px 和高度为 500px 的 div 会导致模糊，无论您以哪种方式移动它或使用 translateX 或 Y 时移动多少。使用变换，它利用了 GPU 图形加速器，应该会产生非常清晰、流畅的效果边缘。设置 box-sizing: border-box; 也可能是个好主意。以确保计算的宽度包括填充和边框。
Be careful when using percentage widths. If it's relative to screen size, ever other screen pixel width will cause this blur.
使用百分比宽度时要小心。如果它相对于屏幕尺寸，其他屏幕像素宽度会导致这种模糊。
回答by bartburkhardt
I fixed this problem by adding a translate3dstyle to the element before any animation occurs.
我通过translate3d在任何动画发生之前向元素添加样式来解决这个问题。
-webkit-transform: translate3d(0,0,0);
回答by Neil Taylor
This is the best solution
translateX(calc(-50% + 0.5px))
这是最好的解决方案
translateX(calc(-50% + 0.5px))
回答by ?arūnas Sirotka
Probably the easiest solution:
可能是最简单的解决方案：
transform: translate(-50%, -50%) scale(2);
zoom:.5;
Scale-and-zoom takes care of rounding the pixel values to full numbers
缩放和缩放负责将像素值四舍五入到完整数字
回答by user3251328
None of these answers worked for me but using
这些答案都不适合我，但使用
display: inline-table;
did the trick
成功了
回答by Kars Barendrecht
Neil Taylor's solution was the best, but it can still be improved:
尼尔泰勒的解决方案是最好的，但它仍然可以改进：
transform: translateX(-50%) translateX(.5px)
transform: translateX(-50%) translateX(.5px)
This way it has 2 advantages:
这种方式有两个优点：
- It works in crappy browsers like IE11 (which doesn't support calc inside translate)
- It only calculates at parse time, not every time the browser evaluates.
- 它适用于像 IE11 这样蹩脚的浏览器（它不支持 calc 内部翻译）
- 它只在解析时计算，而不是每次浏览器评估时计算。
回答by rich
Resetting Chrome's zoom to 100% worked for me.
将 Chrome 的缩放比例重置为 100% 对我有用。
