变换模糊文本：在 Chrome 中旋转答案

【问题标题】：Blurry text on transform:rotate in Chrome变换模糊文本：在 Chrome 中旋转
【发布时间】：2013-12-18 00:55:30
【问题描述】：

我正在构建一个带有旋转的包装 div (transform:rotate(10deg)) 的网站。 div 内的文本也会旋转。我希望文本是直的，所以我将其旋转回来 (transform:rotate(-10deg))。文本又是直的，但这会导致 Chrome（最新版本，mac）中的文本模糊。我试过了：

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

这并没有解决问题..

JSFiddle：http://jsfiddle.net/D69d4/10/

奇怪的是：它在 jsfiddle 中完美运行。但在实际网站上却不行。当我在我的样式中添加-webkit-backface-visibility: hidden; 时，Safari 中的模糊文本再次变得清晰，但在 Chrome 中没有区别。（我几乎认为它在 Chrome 中变得更糟）（FF 工作正常）

我希望有人可以帮助我解决这个问题，或者给我一个解释是怎么回事。

【问题讨论】：

您是否有指向您正在开发的网站的链接？
我在你的#wrapper 中添加了padding: 2px，锯齿状大部分都消失了

标签： css google-chrome text rotation transform

【解决方案1】：

这些答案对我没有任何帮助。在我的position: fixed 元素上删除bottom: 30% 并用top: 60% 替换它就可以了。试试看吧。

【讨论】：

【解决方案2】：

在尝试使用 transform rotateY 旋转卡片时也出现模糊文本问题。

发现这个有用的修复： Rasterization and will-change: transform

只需在您希望使用 transform 设置动画的元素上使用 will-change css 属性和 transform 值。

will-change: transform;

这是我更新后的 css 代码：

.scene {
    perspective: 1600px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

.card__face--front {

}

.card__face--back {
    background-color: white;
    transform: rotateY( 180deg );
}

.card.is-flipped {
    transform: rotateY(180deg);
}

【讨论】：

这适用于一个没有为我制作动画的元素

【解决方案3】：

我使用了transform:rotateY(180deg)，但我的文字很模糊。我用transform: scale(-1, 1) 替换了它，它对我有用。

【讨论】：

【解决方案4】：

这对我有用。

zoom: 1.005;

希望这对你也有帮助。

这将使您的内容有点大，但模糊问题将得到解决。希望这对您有所帮助。

【讨论】：

哇！除了这个，其他都没有工作，谢谢！
只在 chrome 中为我而不是在 firefox 中

【解决方案5】：

对于尽管尝试了之前的建议，但仍然遇到此问题的任何人：

我发现如果你在被旋转的父元素上放置一个perspective 属性，它就完全解决了这个问题。该值可以是0 以上的任何值，假设您没有使用任何 3d 变换。

示例 CSS：

.parent {
    transform: rotate(10deg);
    perspective: 100px;
}

.child {
    transform: rotate(-10deg);
}

【讨论】：

【解决方案6】：

如果您的旋转点位于像素之间，则可能会发生这种情况。为避免这种情况，您可以尝试稍微移动原点或确保被旋转的元素具有奇数尺寸。

【讨论】：

【解决方案7】：

它发生在 Chrome 和 Safari 等 Webkit 浏览器中。尝试添加：

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

你会没事的。

【讨论】：

它有效。就我而言，-webkit-transform-origin: 50% 53%; 给出了更好的结果。
在我的情况下，-webkit-transform-origin: 52% 50%; 适合我。只需调整变换原点，看看它是否适合您想要达到的位置。

【解决方案8】：

尝试添加并检查是否可行（作为 hack）：

transform: translateZ(0);

【讨论】：

可能想补充一点，这会激活硬件加速，这可以让事情变得更快
我已经试过了（对不起我的问题-5 > 0）但是谢谢你的回复
这可能是一个 hack，但它对我有用，所以谢谢