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

在写一个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等等。