3

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

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

谁能帮我解决这个问题？

4

4 回答 4

7

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

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

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

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

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

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

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

于 2013-08-07T11:22:04.443 回答
3

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

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

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

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

于 2014-03-05T17:47:57.730 回答
0

当没有为 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 */
于 2013-12-28T22:56:43.347 回答
0

我有一个类似的问题，问题是透视body和旋转的 div。它只发生在 Mac 上的 Safari 中。铬工作正常。

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
}

删除perspectivefrombody救了我！事实上，我在 body 和另一个旋转的 div 中使用了两次透视，这可能导致难以消除像素化，甚至 SVG 和文本也被像素化了。

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

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

于 2017-02-06T17:24:31.340 回答