使用翻译居中时模态文本模糊（-50%，-50%）；

Question

我在通过

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

居中的模态中遇到模糊文本（Chrome 浏览器）

模态不能以像素为单位显式指定其宽度。

这是模态 div 的当前 css：

#emod 
{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    display: none;
    background-color: #fff;
    -ms-transform: translate(-50.1%,-50.2%); /* IE 9 */
    -webkit-transform: translate(-50.1%,-50.2%); /* Safari */
    transform: translate(-50%,-50%); 
    box-sizing: border-box;
    padding: 20px 100px 100px 100px;
    background-color:White;
    overflow:auto;
    */
}

我已经阅读了所有现有的各种问题和建议，并且我已经尝试了解决此问题的所有常见建议，每个建议都是单独的以及一些组合，包括：

-webkit-transform: translate(-50.1%,-50.1%)
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0); /*this one causes div to not be centered anymore, but works*/

我有什么办法可以克服这个问题吗？ 我读过有关将小数像素四舍五入为偶数的 JavaScript 修复，但找不到有关如何实现它的任何详细信息。我更喜欢 css 解决方案，但我很喜欢 js 解决方案......

我还在这个项目中使用了 jQuery，因此 jQuery 解决方案也可以工作。

Answer 1

尝试添加字体平滑。这以前对我有用。

-webkit-font-smoothing：抗锯齿；

Answer 2

这实际上在这种情况下不起作用。

我一直在寻找答案。 我使用变换：翻译（-50％，-50％）方法使用中心模态窗口，即使所有元素都具有抗锯齿功能，甚至是子像素，我的文本也很模糊。