Рендеринг веб-сайта на iPad периодически прерывается - PullRequest
Новая
       33

Рендеринг веб-сайта на iPad периодически прерывается

1 голос
/ 28 февраля 2012

У меня странная проблема с моим сайтом на iPad, иногда страница просто загружается со странным полем справа от текстовых элементов.Эта проблема началась после того, как я изменил семейство шрифтов моей страницы.Шрифт Yanone Kaffeesatz, который был загружен с Google.Шрифт всегда загружается правильно, но так как это поле никогда не происходило раньше, я предполагаю, что независимо от того, в чем проблема, это было вызвано шрифтом.

Вот как определяется шрифт в css: 

    html, body {
      width: 100%;
      height: 100%;
      background: url('../img/type.png');
      font-family: 'Yanone Kaffeesatz',Arial,sans-serif;
      font-size: 12pt;
      position: relative;
    }

Иногда страница загружается правильно:

This is what it should look like

И иногда она загружается так: (Это непостоянная проблема, но я заметил, что могу вызвать ее загрузкунапример, удалив кеш и открыв страницу)

This is what it sometimes looks like

Кто-нибудь когда-либо видел эту проблему раньше?Любые советы о том, как я могу решить это?Спасибо!

Ссылка на сайт.

1 Ответ

1 голос
/ 05 марта 2012

Кажется, вы удалили пользовательский шрифт на вашем сайте.Я не могу создать тестовый пример в моей локальной сети с Ipad.Но я предлагаю вам использовать FOUT fix для загрузки пользовательских шрифтов .

<script>
    WebFontConfig = {
        google: { families: [ 'Yanone+Kaffeesatz:400,700:latin' ] }
    };
    (function() {
        document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
        //  NEEDED to push the wf-loading class to your head
        document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
        // for IE…
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'false';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

<style type="text/css">
    .wf-loading .article.list {visibility:hidden;}
    .wf-inactive .article.list{ visibility:visible;}
    .wf-active .article.list{font-family: 'Yanone Kaffeesatz', serif;visibility:visible;}
</style>
...