关于html:使用translate50-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等等。