在WebKit浏览器CSS-旋转文字模糊

我已经遇到了严重的问题，我解决不了..在WebKit浏览器CSS-旋转文字模糊

我创建与jQuery插件easyAccordion.js手风琴元素。当我在Firefox中开发并查看它时，它运行良好 - 直到我在Chrome中将其打开。在那里你可以看到旋转后的文本不清晰，当然也很模糊，尽管它与顶部的未旋转文本格式相同。 Safari也一样。

我创建了一个的jsfiddle是sortof再现了我的问题（看看它在铬或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中那种破碎的小提琴，也表明它可以更好地显示旋转后的文字。

我发现了一些提示字体平滑和一些3d参数，但似乎没有为我工作。

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

来源

2013-08-07 user828591

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

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

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

来源

2014-03-05 17:47:57

感谢您的解释良好的解决方案，它完美地工作 - 从234到235改变手风琴高度（这将产生dt宽度）做到了诀窍！ http://jsfiddle.net/SfKKv/643/ – user828591

尝试SVG。这里是一个例子http://codepen.io/Izaias/pen/WvWxxv。 – Izaias

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

下面是更新的JS Fiddle，再次在Chrome或Safari中使用它。使用红色的悬停框来查看动作中的魔法。

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

所有我做的是从它的默认值（50％50％）改变-webkit-变换出身的东西足够接近，如

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

当您尝试取出了小提琴，你会看到它移动了一个百分点。但是，这仍然比模糊的文字更好。

我发现这是纯粹的试验和错误，我仍然不知道为什么文本突然变得尖锐。如果有人能解释我的这种行为，让我知道！

来源

2013-08-07 11:22:04 user828591

老兄！棒极了！我给你一个拥抱。如果将一个容器（例如15deg）及其内容旋转到相反的方向-15deg，这可以很好地工作。应该接受答案。 – zsitro

很高兴帮助你。我希望别人有更好的解决方案，这就是为什么我没有选择我自己的答案作为接受的答案。 – user828591

如果你想知道为什么会发生这个问题，我已经在我的[解答]中解释了它（http://stackoverflow.com/questions/18099994/css-rotated-text-in-webkit-browsers-is-blurred/22205245＃22205245）。 –

出现此问题时，背景色为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-28 22:56:43

我不记得有关于IE的问题，但它可能会帮助其他人。 – user828591

我有一个类似的问题，问题是在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，这可能导致很难杀pixelations，甚至SVG和文字像素化。

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

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

来源

2017-02-06 17:24:31 sabithpocker

在WebKit浏览器CSS-旋转文字模糊

回答

相关问题