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%;

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

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

Answer 2

我认为这与Chrome呈现转换的方式有关。查看我要谈的内容的最佳方式是转到chrome://flags/并启用Composited render layer borders。现在，转到您发布的fiddle with a fix。您会注意到页面上几个元素周围的橙色边框。这个边框是因为它显示这些元素在页面上呈现时被赋予了自己的图层。

使用Chrome检查器工具开始调整dt中<dl class="easy-accordion">元素的宽度。根据宽度是偶数还是奇数，文本将变得模糊/清晰。这里似乎发生的是层被合成到一个半像素的位置，然后被渲染以创建两个像素“之间”的外观。

这也是Safari（以及WebKit）的问题。

查看http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome了解详情。

Answer 3

如果没有为IE版本8和9以及某些版本的Chrome定义背景颜色（我在Chrome中没有看到此问题），则会出现此问题

添加背景颜色：白色; （或你想要的任何颜色）你的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 */

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
}

从perspective中移除body救了我！ 确实我使用了两次透视，在身体和另一个旋转的div中，这可能导致难以杀死的像素化，甚至SVG和文本都是像素化的。

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

从身体中删除上述样式保存了我。

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

4 个答案: