Webkit浏览器中的CSS-Rotated文本模糊不清

Question

我遇到了一个我无法解决的严重问题..

我用jQuery插件easyAccordion.js创建了一个accordion元素.当我在Firefox中开发并查看它时,它运行良好 - 直到我在Chrome中打开它.在那里你可以看到旋转的文本不清楚并且肯定是模糊的,即使它与顶部未旋转的文本具有相同的格式.适用于Safari.

我创建了一个jsfiddle,可以重新创建我的问题(在Chrome或Safari中查看)

.

..

http://jsfiddle.net/SfKKv/427/

..

.

这就是我用来旋转文本的内容:

  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);

JSFiddle并没有完全在Firefox中运行,但这并不重要,我在它创建它的网站上工作,但即使是在FIrefox中破坏的Fiddle也显示它可以更好地显示旋转的文本.

我已经找到了一些关于字体平滑和一些3d参数的提示,但似乎没有一个对我有用.

任何人都可以帮我解决这个问题吗？

Answer 1

好的,所以在尝试了一些不寻常的事情后,我发现了一个不是100%完美/准确但对我来说足够好的修复.

这是更新后的JS Fiddle,再次在Chrome或Safari中使用它.使用红色悬停框查看动作中的魔法.

http://jsfiddle.net/SfKKv/627/

我所做的就是将-webkit-transform-origin从其默认值(50%50%)更改为足够接近的值,例如

-webkit-transform-origin: 50%  51%;

当你尝试小提琴时,你会看到它移动了那个百分之一.但是,这仍然比模糊文本更好.

我通过纯粹的试验和错误发现了这一点,我仍然不知道为什么文本突然变得尖锐.如果有人能解释我这种行为,请告诉我!