크롬에서 회전 된 div에서 변형 된 텍스트

Question

콘텐츠가 회전하여 볼 수있는 페이지가 있습니다.

<div id="viewport"> 
    <div id="pages"> 
     <div id="page1" class="page"> 
      Page 1 
     </div> 
      ... 
     <div id="page6" class="page"> 
      Page 6 
     </div> 
    </div> 
</div> 

와 CSS의

는

body{ 
    font-family: 'Quicksand', sans-serif; //google web font 
} 
#viewport{ 
    width: 700px; 
    height: 446px; 
    z-index: 1; 
} 
#pages{ 
    -webkit-transform: rotateZ(0deg); 
    left: -716px; 
    position: relative; 
    width: 2094px; 
    height: 2010px; 
    z-index: -1; 
} 
#page1 { 
    left: 717px; 
} 
#page2 { 
    top: 414px; 
    left: 1435px; 
    -webkit-transform: rotateZ(60deg); 
}    

이와 나는 #pages div의 돌립니다. 이것은 파이어 폭스 (적절한 브라우저 속성과 함께)에서 잘 작동합니다. 하지만 크롬 (28.0.1500.20 베타 -m 및 26something, 둘 다 64 비트 창 7)에서는 글꼴이 변형되었습니다 google drive link to example. 크롬 문제 추적기에서 찾지 못했습니다. 잘못되었거나 버그 보고서를 제출해야합니까? 어떤 제안을 주셔서 감사합니다 ...

Answer 1

확인

-webkit-backface-visibility:hidden; 

내가 찾던이었다 수정을 발견했다. 여전히 ff에서와 같이 좋지는 않지만 최소한 한 줄에 있어야합니다.