此问题似乎会影响所有基于 WebKit 的浏览器，包括 iPhone。
首先介绍一下背景。我正在处理的站点使用基于 JavaScript 的“滑块”动画。
我正在使用-webkit-transform: translate3d“驱动”实际动画。与基于 JavaScript 的方法不同，使用此方法时，一旦内容被动画化，文本就会变得模糊。这在 iPhone 上尤为明显。
我看到的一些解决方法是删除相对定位，我这样做了，并添加了一个规则-webkit-font-smoothing: antialiased，我也这样做了。这两种变化都没有产生丝毫的不同。
我可以在没有模糊文本的情况下正常工作的唯一方法是对动画使用常规 JavaScript 并translate3d完全绕过。我更喜欢使用translate3d它，因为它在支持 WebKit 的设备上的执行速度要快得多，但在我的一生中，我无法弄清楚为什么它会以如此糟糕的方式影响文本。
任何建议或解决方案将不胜感激。
这些似乎都不适合我，但我发现了一个有点脏的解决方案，它似乎可以解决问题：
top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
正如@Robert 上面提到的，有时添加背景会有所帮助，但并非总是如此。
因此，对于 Dmitry 添加的示例，这不是您必须做的唯一事情：除了在后台，您必须告诉浏览器明确使用正确的抗锯齿，因此，有一个固定的 Dmitry 示例：http : //jsfiddle.net /PTDVF/1/
您需要在需要修复抗锯齿的块周围（或为其添加这些样式）：
background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;
我在 Ken Avila 的帖子中遇到了完全相同的问题：CSS: transform: translate(-50%, -50%) 使文本变得模糊
问题当然是我使用了 transform: translate(-50%, -50%) 这使我的居中内容变得模糊，但仅限于 osx 上的 safari。
变得模糊的不仅是文本，还有整个内容，包括图像。我继续阅读：http ://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/，“模糊”是由于元素在非整数边界上呈现。
我还发现我可以避免在这篇文章的居中水平部分使用变换翻译：https : //coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css -position-absolute-fixed -唯一的缺点是我不得不引入一个包装器。
我发现使用 transform: translateY(-50%) 没有创建任何“模糊”，可能是因为我的元素有一个设定的高度，因此最终不会在非整数边界上呈现。
因此，我的解决方案最终是这样的：
.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>您正在翻译的元素必须能被两个偶数整除。
重要的是，无论您想要移动一半的元素，它的宽度和高度都可以被 2 整除。与响应式图像非常相似，可以在不分割像素的情况下将物体移动 50%。
宽度为：503px 和高度为 500px 的 div 会导致模糊，无论您使用translateX 或Y 时移动它的方式或移动多少。使用transform，它利用GPU 图形加速器，应该会产生非常清晰、流畅的效果边缘。设置 box-sizing: border-box; 也可能是个好主意。以确保计算的宽度包括填充和边框。
使用百分比宽度时要小心。如果它与屏幕尺寸有关，那么其他屏幕像素宽度会导致这种模糊。
我通过translate3d在任何动画发生之前向元素添加样式来解决这个问题。
-webkit-transform: translate3d(0,0,0);