Question

我正在测试我的网站，并注意到在iOS设备上导航（滑动导航）和页脚文本模糊。

这不会发生在任何其他地方，也不会出现在任何其他浏览器/平台上。

我用-webkit-font-smoothing：antialiased;但没有运气解决这个问题。

CSS：

#nav {
    a {
        display: block;
        padding: 20px 25px 22px;
        position: relative;
        -webkit-font-smoothing: antialiased;

        h1 {
            @include font-size(13);
            color: #747678;
            font-weight: 700;
            margin: 0 0 10px 0;
            padding: 0px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        h2 {
            @include font-size(18);
            line-height: 24px;
            margin: 0;
            padding: 0;
            color: #0072ac;
            font-weight: normal;
        }

        h3 {
            @include font-size(14);
            margin: 8px 0 0;
            padding-right: 20px;
            color: #0072ac;
            font-weight: 300;
        }

        &:hover {
            .supports-no-touch & {
                background-color: #007dba;
                h1, h2 {
                    color: #FFF;
                    font-weight: 500;
                }
                h3{
                    color: #d5e9f3;
                }
            }
        }
    }
}

HTML（带红宝石）

这是呈现在列表中的内容

<script type="text/html" id="tpl-nav-item">
    <a href="{{path}}">
        <h1>{{categoryLabel}}</h1>
        <h2 class="title">{{title}}</h2>
    </a>
</script>

提前致谢。

斯科特

Answer 1

强制浏览器使用以下内容重新绘制：-webkit-transform: translate3d(0,0,0);

希望这有助于其他人。

iOS设备上出现模糊的字体/文字（HTML / CSS）

1 个答案: