关于html:使用translate50-50出现文本模糊的问题

33次阅读

共计 809 个字符,预计需要花费 3 分钟才能阅读完成。

在写一个 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,边距就设置偶数的paddingmargin等等。

正文完
 0