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


↑原来的样子


↑应用translate之后的样子

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


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

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

  • 已确定元素的宽高时

    1. 应用负margin代替translate

  • 不确定元素宽高时

    1. 利用js计算元素的负margin以代替translate
    2. 应用flex代替translate
    3. 应用下方代码防止应用translate
    <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 class="box">    <span class="message">你好啊s</span></div>

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