Webkit浏览器中的CSS旋转文本模糊了

Question

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

我使用jQuery插件easyAccordion.js创建了一个手风琴元素。在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参数的提示，但没有一个对我起作用。有人能帮我解决这个问题吗？

- user828591

Answer 1

好的，经过尝试一些不常见的方法，我找到了一个解决方案，虽然不是100%完美/准确，但对我来说已经足够好了。

这里是更新后的JS Fiddle，仍然在Chrome或Safari中使用。使用红色Hover框查看魔法效果。

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

我所做的就是将-webkit-transform-origin从其默认值（50％50％）更改为接近的值，例如

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

当你尝试使用小提琴时，你会看到它移动了1％。然而，这仍比模糊的文本要好。

我通过纯粹的试错发现了这一点，但我仍然不知道为什么文本突然变得清晰。如果有人能解释这种行为，请让我知道！

- user828591

---

哥们儿！太棒了！我给你一个拥抱。如果您旋转容器（例如15度）及其内部内容朝相反方向旋转-15度，则此方法效果很好。答案应该被接受。 - zsitro

很高兴能帮到你。我希望还有其他人能提供更好的解决方案，这也是为什么我没有选择自己的答案作为被采纳的答案的原因。 - user828591

如果你想知道为什么会出现这个问题，我已经在我的答案中解释了。 - Josh Durham

Answer 2

我相信这与Chrome渲染变换的方式有关。 最好的方法是打开 chrome：// flags / 并启用 Composited render layer borders ，然后转到您发布修复程序的演示。您将注意到页面上有几个元素周围有橙色边框。出现此边框是因为它显示在呈现页面上时这些元素被赋予了自己的图层。

使用Chrome检查器工具调整<dl class="easy-accordion">中dt元素的宽度。文本会变得模糊或清晰，具体取决于宽度是偶数还是奇数。这里似乎发生的事情是该图层被合成到半像素位置，然后被渲染以创建“在”两个像素之间的外观。

Safari（以及WebKit）也存在此问题。

请查看http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome获取更多信息。

- Josh Durham

---

感谢您详细解释的解决方案，它完美地运行了 - 将手风琴高度（这将生成dt宽度）从234更改为235就解决了问题！ http://jsfiddle.net/SfKKv/643/ - user828591

Answer 3

这个问题出现在IE 8和9版本以及可能一些Chrome版本中，当背景颜色未定义时会出现。

将background-color: white;（或任何你想要的颜色）添加到你的css旋转类中可以解决这个问题。

-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);
 background-color: white;         /* fix blurry text in ie8, 9 */

- Marcel Verwey

---

我不记得在IE上遇到过问题，但这可能会帮助其他人。 - user828591

Answer 4

我遇到了类似的问题，问题出在 body 和旋转的 div 上。这只发生在 Mac 上的 Safari 中，Chrome 没有问题。

body {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-family: 'Varela Round', sans-serif, Helvetica;
    transform-style: preserve-3d;//bad
    perspective: 1200px;//bad
    -webkit-text-size-adjust: none
}

从 body 中移除 perspective 真是救了我！事实上，我在 body 和另一个旋转的 div 中都使用了 perspective，这可能导致难以消除的像素化，即使 SVG 和文本也会出现像素化。

transform-style: preserve-3d;
perspective: 1200px;

从主体中删除上述样式可以解决问题。

- sabithpocker