这个问题会影响所有基于WebKit的浏览器，包括iPhone。
首先，一些背景。我工作的网站使用的基于JavaScript的“滑”动画。
我使用-webkit-transform: translate3d以“权力”的实际动画。当使用这种方法，而不是一个基于JavaScript的方法，文本变得模糊全部一旦内容已被动画。这是在iPhone上尤其明显。
我看到有几个解决方法是删除一个相对定位，我做到了，并且加入了对-webkit-font-smoothing: antialiased一个规则，我也做到了。无论是变了，丝毫差别。
我可以使这项工作不正常文字模糊的唯一方法是使用常规的JavaScript的动画和完全绕过translate3d。我宁愿使用translate3d因为它启用WebKit的设备进行快得多，但对我的生活我想不通为什么它是影响在这么贫穷的方式的文本。
任何建议或解决方案将不胜感激。
正如@Robert上面提到的，有时添加背景帮助，但并非总是如此。
因此，对于例如梅德补充说，这不是你必须做的唯一的事情：除了从背景，你必须告诉浏览器明确地使用适当的抗混叠，所以，有一个固定的德米特里的例子：http://jsfiddle.net/PtDVF/1/
您需要添加周围这些样式（或对），您需要修复的抗锯齿块：
background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;
我希望这是关于中心对象到屏幕的正中央。模糊用变换发生的情况：翻译（-50％， - 50％）;
所以不要做
position: absolute;
margin:0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
我试着使用JavaScript注入风格中的元素。 （React.js）
const node = ReactDOM.findDOMNode(this);
var width = node.offsetWidth;
var height = node.offsetHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
style={
left : (windowWidth/2) - (this.state.width/2) + 'px',
right: (windowWidth/2) - (this.state.width/2) + 'px',
top: (windowHeight/2) - (this.state.height/2) + 'px',
bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}
由JavaScript注入风格的风格融入元素
例如。
export default class Dialog extends React.Component {
constructor(props) {
super(props);
this.state = {
width: '0px',
height: '0px'
};
}
setWidthhandHeight(node){
if (this.state.width !== node.offsetWidth) {
this.setState({
width: node.offsetWidth,
height: node.offsetHeight
});
}
}
componentDidMount() {
this.setWidthhandHeight(node);
}
render() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
return (
<dialog className={this.props.className + " dialog"}
style={{
left : (windowWidth/2) - (this.state.width/2) + 'px',
right: (windowWidth/2) - (this.state.width/2) + 'px',
top: (windowHeight/2) - (this.state.height/2) + 'px',
bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}}>
{this.props.title ? (
<header><span>{this.props.title}</span></header>
)
: null
}
{this.props.children}
</dialog>
);
}
}
减小垂直余量（边距或下边距）或任何元件的高度在其上变换转换属性中的容器被通过仅1个像素施加。
@kizu这些答案和建议没有帮助。为了您的jsfiddle你需要添加
-webkit-透视来源：50％50％; -webkit视角：1400px;
该元素的父元素，你要上使用translate3d，否则翻译z轴实际上并没有做任何事情。在这种情况下，你正在申请给你按一下按钮，我想你的意思是把它应用到的内容。
但无论如何，添加这些激活z轴变化导致的模糊在你的榜样按钮。
我很想找到一个解决的办法为好，我怕没有一个。
对于替代解决方案的尝试：
-webkit-text-stroke: 0.35px
我用will-change关于这些类型的问题，它通常可以解决扩展问题或舍入误差，如看到1px的白线分离例如元素。
will-change: transform;
在这里阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
在我的案例中发现溶液设定第一子元素height值
.row{
height: 100vh;
background-color:black;
}
.align-center{
left:50%;
top:50%;
background-color:green;
}
.translate3d{
transform: translate3d(-50%,-50%,0);
}
.translateXY{
transform: translateX(-50%) translateY(-50%);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<h1 class="text-center position-absolute align-center text-white translate3d font-weight-bold">BLURRED</h1>
</div>
<div class="col">
<h1 class=" text-center position-absolute align-center text-white font-weight-bold translateXY ">CLEAR</h1>
</div>我也有同样的问题，当我用translateZ，当我用平移X和translateY在一起，而不是translateZ它得到了解决，这样
transform: translateX(-50%) translateY(-50%);
用透明背景的作品，以及，不知道为什么，但我ATLEAST工作
使用HTML5的doctype解决这个问题对我来说。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
这些都不似乎为我工作，但我已经找到了一个稍微肮脏的解决方案这似乎这样的伎俩：
top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
我曾在肯阿维拉的职位描述完全一样的问题：CSS: transform: translate(-50%, -50%) makes texts blurry
问题是当然，我使用的变换：翻译（-50％，-50％），这使我的中心内容变得模糊，但仅在OSX Safari浏览器。
它不仅是成为模糊的文本，而是整个内容，包括图片。我读：http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/的“blurryness”是由于该元素是一个非整数边界上呈现。
我还发现，我能避免使用变换我的中心从这个职位的水平部分翻译：https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed -The只有零下是，我已经向大家介绍的包装。
我发现，使用变换：平移Y（-50％）没有产生任何“bluryness”，也许是因为我的元素都有一套高度，因此不会最终呈现一个非整数边界上。
因此，我的解决办法弄成这个样子：
.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>我被发生的任何动画之前添加translate3d风格的元素固定的这个问题。
-webkit-transform: translate3d(0,0,0);
你要翻译的元素必须是整除由两个偶数号。
I'ts重要的是，你试图通过半移过任何元素由两个两个它的宽度和高度整除。非常相似的响应图像，当事情可以通过50％的不分割像素移动。
与宽度一个DIV：503px和500px的高度会导致模糊，不管你移动，或通过使用平移X或Y使用变换多少时哪种方式，它利用GPU图形加速器，这将导致非常明快，流畅边缘。这也可能是设置盒大小是个好主意：边界框;确保计算的宽度包括填充和边框。
使用百分比宽度时要小心。如果它是相对于屏幕尺寸，以往其他屏幕像素宽度将导致此模糊。
这是最好的解决方案translateX(calc(-50% + 0.5px))
也许最简单的解决方案：
transform: translate(-50%, -50%) scale(2);
zoom:.5;
规模和缩放采取四舍五入的像素值，以全数字的护理
这些答案都不为我工作，但使用
display: inline-table;
的伎俩
使用zoom解决了这个问题对我来说。
我只是说zoom: 1.04;