CSS使用百分比平移位置，导致字体元素模糊

Question

我正在使用这种技术将屏幕中的元素居中，如下所示：

position: absolute;
margin: auto;
z-index: 99999;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
min-width: 350px;
max-width: 500px;
padding: 20px 30px 35px;

导致框内的文字模糊。我已经搜索了一个解决方案，尽管有些人建议使用-webkit-font-smoothing，但它并没有解决任何可能的值的问题。

编辑：

没有翻译属性：

使用翻译属性：

如何阻止这种情况发生？ （我正在使用chrome btw）

Answer 1

尝试在父元素上使用preserve-3d。当元素按百分比平移时，它们可以放在一个半像素上，而这个像素并不总能正确呈现。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}