使用translate(-50%, -50%)出现文本模糊的问题

在写一个toast组件的时候，组件上的文字会变得模糊，发现是因为toast使用了transform: translate(-50%, -50%);

↑原来的样子

↑使用translate之后的样子

在复现过程中发现FireFox并不会出现模糊的问题，而Chrome和新版Edge会有，并且是在有滚动条时才会模糊

↑无论是横向还是纵向的滚动条的出现都会有影响

网上大多数解释都是：使用了transform的元素的宽度或高度为奇数造成的（底层原因暂未找到，有知道的大佬请评论告知），这里提供几种解决方案

已确定元素的宽高时

不确定元素宽高时

<style>
    .box{
        position: fixed;
        top: 50%;
        left: 0;
        width: 100%;
        height: 0;/* 防止.box阻挡未定位元素的鼠标事件 */
        text-align: center;/* 规避因宽度为奇数造成模糊 */
    }
    .message{
        display: inline-block;
        transform: translateY(-50%);
        line-height: 20px;/* 文本可以通过此属性控制高度的数值为偶数 */
        /* 其他美化样式 */
        padding: 10px 12px;
        background-color: rgba(37, 44, 65, 0.8);
        color: #f4f5f9;
    }
</style>
<div >
    <span >你好啊s</span>
</div>

虽然这里的.message也使用了translate，但是相对于宽度来说，高度的数值是更容易掌控的：文本就设置偶数的line-height，图片就设置偶数的height，边距就设置偶数的padding或margin等等。

Tags 标签

加个好友，技术交流