关于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,边距就设置偶数的paddingmargin等等。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据