如何解决定位上的像素化对象文本,图像,边框
所以我很难在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;
}
然后从链接中删除绝对/固定位置。不过,将需要进行微调。唯一的缺点是该元素将覆盖整个页面,因此可能对您不起作用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。