基于Webkit的模糊/扭曲的文本后animation通过translate3d
此问题似乎会影响所有基于WebKit的浏览器，包括iPhone。
首先是一些背景。 我正在使用的网站使用基于JavaScript的“滑块”animation，基本上与此相同： http : //www.assistly.com/product-tour/#/easy-setup
唯一的区别是我正在使用-webkit-transform：translate3d来为实际的animation“提供动力”。 当使用这种方法时，与基于JavaScript的方法相反，一旦内容被animation，文本变得模糊。 这在iPhone上尤其明显。
我看到的一些解决办法是删除我做的相对定位，并为-webkit-font-smoothing添加一个规则：antialiased，我也这样做了。 这两个变化都没有丝毫的区别。
我可以使这个工作正常工作，没有模糊的文本的唯一方法是使用普通的JavaScript的animation和绕过translate3d完全。 我更喜欢使用translate3d，因为它在启用WebKit的设备上执行得更快，但是对于我来说，我无法弄清楚为什么它会以如此糟糕的方式影响文本。
任何build议或解决scheme将不胜感激。
正如@Robert上面提到的，有时候添加背景会有所帮助，但并不总是如此。
所以，对于这个例子，Dmitry补充说，这不是唯一必须做的事情：除了背景之外，你必须告诉浏览器明确地使用正确的反锯齿，所以，有一个固定的Dmitry的例子： http : //jsfiddle.net / PtDVF / 1 /
您需要在需要修复反锯齿的块（或块）中添加这些样式：
background: #FFF; /* Or the actual color of your background/applied image */ -webkit-font-smoothing: subpixel-antialiased; 这些似乎都没有为我工作，但我发现了一个稍微肮脏的解决scheme，似乎做的伎俩：
top: 49.9%; left: 49.9%; -webkit-transform: translate(-50.1%, -50.1%); transform: translate(-50.1%, -50.1%);
我解决了这个问题，在发生任何animation之前向元素添加translate3d样式。
-webkit-transform: translate3d(0,0,0);
我有肯·阿维拉的文章中描述的完全相同的问题： 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％）没有创build任何“bluryness”，也许是因为我的元素有一个高度，因此不会在非整数边界上渲染。
因此，我的解决scheme如下所示：
.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>
你正在翻译的元素必须可以用偶数来整除。
我认为无论你试图移动一半的元素，无论宽度还是高度都可以被整除。 非常类似的响应图像，当事情可以被移动50％没有分裂像素。
一个宽度为503px，高度为500px的div会导致模糊，无论用何种方式移动它，或者使用translateX或Y时多less。使用transform，它会使用GPUgraphics加速器，这会导致非常清晰，平滑边缘。 设置框大小也可能是一个好主意：border-box; 以确保计算的宽度包括填充和边框。
使用百分比宽度时要小心。 如果是相对于屏幕大小，其他屏幕像素宽度将导致此模糊。
请参阅WebKit：使用css比例模糊文本+ translate3d获取解决scheme。 这很好，但你必须调整很多。
这是最好的解决schemetranslateX(calc(-50% + 0.5px))
这些答案都没有为我工作，但使用
display: inline-table;
做的伎俩
@ kizu这些答案和build议没有帮助。 对于你的jsfiddle你需要添加
-webkit-perspective-origin：50％50％; -webkit-perspective：1400px;
到要使用translate3d的元素的父元素，否则翻译z轴实际上不做任何事情。 在这种情况下，你正在将它应用到你点击的button，我想你的意思是应用到内容。
但无论如何，添加这些来激活z轴的变化会导致你的例子中的button模糊。
我也很想find解决办法，我担心没有一个。
对于替代解决scheme，请尝试
-webkit-text-stroke: 0.35px
刚刚通过一个简单的把戏，我不知道这个理由固定。 在这里你可以看到不同的。
原来，我这样的元素：
top: 50%; left: 50%; transform: translate(-50%, -50%);
这导致了模糊的文本…随机试用后，我把风格放在类风格，强制CSS处理器采取这种风格，而不是元素风格（因为我使用React组件，由React设置的风格将成为元素样式）
这就是我所做的。
.class-name { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
我真的想知道为什么将这种风格从元素风格移动到类风格可以解决这个问题。 任何想法？
可能是最简单的解决scheme：
transform: translate(-50%, -50%) scale(2); zoom:.5;
缩放和缩放function会将像素值四舍五入为整数
使用HTML5文档types解决了我的问题。
<!doctype html> <html> <head> <meta charset="UTF-8">
