定位上的像素化​​对象文本，图像，边框

问题描述

所以我很难在Chrome上解决一些像素问题。

以下是一些示例：

图像（转换：translate（-50％，-50％）；位置：固定；）

某些文本（转换：translate（-50％，-50％）旋转（180deg）和（转换：translate（-50％，-50％）；）模糊）

我尝试过
-webkit-backface-visibility：隐藏； -webkit-transform：translationZ（0）scale（1.0，1.0）; 和其他解决方案，但似乎无济于事。

无论如何，感谢您签出并感谢您的帮助！

解决方法

这是Chrome的常见问题，您可以尝试使用hack，但就我个人而言，我从来没有使它起作用，因此，如果您是我，则可以使用其他方法来构建它。 Blurry text after using CSS transform: scale(); in Chrome供您参考。

我建议您修复父级而不是子级，并使用flexbox。

.entry-content .navigation {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 30px;
    left: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

然后从链接中删除绝对/固定位置。不过，将需要进行微调。唯一的缺点是该元素将覆盖整个页面，因此可能对您不起作用。