文本在chrome中的旋转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。这适用于例如firefox（具有适当的浏览器属性）。但在Chrome（28.0.1500.20 beta-m和26something，均在64位Windows 7上），字体变形google drive link to example。我没有在Chrome问题跟踪器中找到它。我做错了什么或者我应该提交错误报告？谢谢你的任何建议......

Answer 1

确定找到了解决方法

-webkit-backface-visibility:hidden;

是我想要的。仍然不像ff那样好，但它至少保持在一条线上。