iPad에서 웹 사이트 렌더링이 간헐적으로 잘못되었습니다.

Question

iPad에서 내 웹 사이트에 이상한 문제가 있습니다. 때때로 텍스트 요소 오른쪽에 이상한 여백이 표시되는 경우가 있습니다. 이 문제는 내 페이지의 글꼴 모음을 변경 한 후에 시작되었습니다. 글꼴은 Google에서로드 된 Yanone Kaffeesatz입니다. 글꼴은 항상 올바르게로드되지만, 글꼴의 원인이 무엇이든간에이 여백은 결코 발생하지 않습니다.

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

때때로 페이지로드 올바르게 :

를 그리고이 같은로드 몇 번 : 여기

글꼴은 CSS에 정의하는 방법이다 (이것은 간헐적 인 문제입니다 만 캐시를 삭제하고 페이지를 열어서이 같은로드가 발생할 수 있음을 확인했습니다.

전에이 문제를 본 사람이 있습니까? 어떻게 해결할 수 있을지에 대한 조언? 감사!

Link to site.

Answer 1

당신이 당신의 사이트에 사용자 지정 글꼴을 제거 보인다. ipad를 사용하여 로컬 네트워크에서 테스트 케이스를 만들 수 없습니다. 그러나 FOUT fix for loading custom fonts을 사용하는 것이 좋습니다.

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