html - 字体/文本在 iOS 设备上显得模糊 (HTML/CSS)

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(带 ruby )

这是渲染到列表中的内容

<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);

希望这对其他人有帮助。