在父元素上使用变换时的Chrome文本呈现 [英] Chrome text rendering when using transforms on parent element
本文介绍了在父元素上使用变换时的Chrome文本呈现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对div元素有一个非常简单的变换。里面是几行文本。文字在Firefox和IE上呈现良好,但在Chrome中看起来不太好。我尝试改变-webkit-font-smoothing,但是没有帮助。
I have a very simple transform on div element. Inside of it is few lines of text. Text renders fine on Firefox and IE, but it is not looking good in Chrome. I tried changing -webkit-font-smoothing, but that didn't help either.
.text-holder{position: absolute;top: 0;width: 30rem;height: 20rem;margin-right: auto;margin-left: auto;left: 0;right: 0;-webkit-transform:rotate(-4.6deg);-moz- transform:rotate(-4.6deg); transform: rotate(-4.6deg);}
这里是小提琴:
http://jsfiddle.net/FFA6b/
推荐答案
很难解释为什么,但添加透视解决了问题:
It's difficult to explain why, but adding perspective solves the issue:
-webkit-transform: perspective(999px) rotate(-4.6deg);
fiddle
这篇关于在父元素上使用变换时的Chrome文本呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文