Chrome 现在在使用带百分比的转换 translateY 时会模糊文本答案

【问题标题】：Chrome is now blurring text when using transform translateY with percentChrome 现在在使用带百分比的转换 translateY 时会模糊文本
【发布时间】：2017-02-06 16:25:28
【问题描述】：

几天以来，我正在尝试一个相当大的问题，即使用非常酷的技术来垂直居中 div 与 css3 变换 (transform: translateY(-50%); ) 描述如下：

https://davidwalsh.name/css-vertical-center

确实，这个 div 中包含的元素（文本或图像）变得模糊了。

我尝试了很多技术（transform: translateZ(0); backface-visibility; scale(1); translateX( calc( -50% + 0.5px) ); filter: blur(0); 等等） .但实际上没有任何效果。

唯一可行的方法是使用另一种技术使 div 垂直居中，例如 display:table-cell。

但是，出于显而易见的原因（例如添加 div 容器的义务），我宁愿不这样做。

所以我有两个问题：

首先，你知道一种行之有效的技术吗？其次，这是最新（或最新）版本的 Chrome 的新问题吗？

感谢您的帮助，

大卫

PS：这里表达的所有旧解决方案 Webkit-based blurry/distorted text post-animation via translate3d 不工作

【问题讨论】：

Webkit-based blurry/distorted text post-animation via translate3d的可能重复
在被暂停的 URL 中提供的解决方案实际上都不起作用。我认为问题出现在 Chrome 53 版本中。
translateX( calc( -50% + 0.5px ) ); 是指translateY(...);？

标签： css google-chrome transform blur translate

【解决方案1】：

目前，我只找到了一个好的解决方案：

transform: translate(-50%, -50.1%)

0.1% - 一般用户看不到这个
无需计算价值

希望 chrome 能够修复它 - 该错误自 2014 年以来就存在））））

【讨论】：