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

【问题标题】：CSS-Rotated text in Webkit browsers is blurredWebkit 浏览器中的 CSS 旋转文本模糊
【发布时间】：2013-08-07 09:42:35
【问题描述】：

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

我使用 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 参数的提示，但似乎没有一个对我有用。

谁能帮我解决这个问题？

【问题讨论】：

标签： css webkit rotation blurry

【解决方案1】：

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

这是更新后的 JS Fiddle，再次，在 Chrome 或 Safari 中使用它。使用红色的 Hover 框来查看魔术的作用。

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

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

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

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

我通过纯粹的反复试验发现了这一点，但我仍然不知道为什么文字突然变得清晰。如果有人可以向我解释这种行为，请告诉我！

【讨论】：

老兄！棒极了！我送你一个拥抱。如果您将容器（例如 15 度）及其内部内容旋转到相反方向 -15 度，则此方法效果很好。答案应该被接受。
很高兴它对您有所帮助。我希望其他人有更好的解决方案，这就是为什么我没有选择自己的解决方案作为接受的答案。
如果你想知道为什么会出现这个问题，我已经在我的answer中解释过了。

【解决方案2】：

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

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

这也是 Safari（和一般的 WebKit）的问题。

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

【讨论】：

感谢您解释清楚的解决方案，它完美运行 - 将手风琴高度（将生成 dt 宽度）从 234 更改为 235 成功了！ jsfiddle.net/SfKKv/643

【解决方案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 */

【讨论】：

我不记得 IE 有问题，但它可能对其他人有帮助。

【解决方案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 救了我！ 确实我使用了两次透视，在正文和另一个旋转的 div 中，这可能导致难以消除像素化，甚至 SVG 和文本都被像素化了。

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

从正文中删除上述样式救了我。

【讨论】：