Периодически неправильное отображение веб-сайта на iPad

У меня странная проблема с моим веб-сайтом на 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;
    }

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

Вот как это должно выглядеть

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

Вот как это иногда выглядит

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

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


ipad mobile-safari mobile-webkit
person Raphael    schedule 28.02.2012    source источник
comment
Пожалуйста, добавьте больше деталей в свою публикацию... какой-нибудь код? какие шрифты?   -  person Sparky    schedule 28.02.2012
comment
Шрифт Yanone Kaffeesatz загружен из Google.   -  person Raphael    schedule 28.02.2012
comment
А если переключиться обратно на другой шрифт, проблема исчезнет?   -  person Sparky    schedule 28.02.2012
comment
Да, это так. Я предполагаю, что это как-то связано с порядком загрузки ресурсов, если шрифт уже находится в кеше, проблема возникает редко.   -  person Raphael    schedule 28.02.2012
comment
Я недостаточно знаком со шрифтами, чтобы объяснить ваши результаты. Однако у вас есть преимущество в том, что вы знаете, что этот шрифт является причиной. Просто сбросьте шрифт на что-то похожее... есть миллион других.   -  person Sparky    schedule 28.02.2012
comment
@Sparky672 - я сделал это. Пока я не разберусь, что, черт возьми, происходит, я оставлю шрифт без засечек. Спасибо   -  person Raphael    schedule 28.02.2012
comment
Здесь нечего выяснять... шрифт поврежден, не соответствует спецификации, сломан и т. д. или в нем есть что-то уникальное, что вызывает непонятную ошибку рендеринга iPad. В любом случае, зачем тратить больше времени на такой тривиальный вопрос? Существует веб-сайт, на который вы можете загрузить образец текста, и он вернет все подходящие шрифты. Я уверен, что вы можете найти что-то еще, что соответствует Yanone Kaffeesatz.   -  person Sparky    schedule 28.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

<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>
person trkaplan    schedule 05.03.2012