google-chrome - 在 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 中的那么好，但它至少保持在一行中。