Font/text appearing blurry on iOS devices (HTML/CSS)

Question

I am in the middle of testing my site and have noticed that on iOS devices the navigation (sliding nav) and the footer text are blurry.

This doesn't occur anywhere else nor does it appear on any other browser/platform.

I've used -webkit-font-smoothing: antialiased; but with no luck on fixing this issue.

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

This is what is rendered into the list

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

Thanks in advance.

Scott

Answer 1

Forcing the browser to re-paint using: -webkit-transform: translate3d(0,0,0);

Hope this helps someone else.