javascript - 使用翻译居中时模态文本模糊(-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:抗锯齿；