使用提示(网格拟合)文本防止元素上的'跳跃'CSS过渡

Question

我正在尝试在我正在处理的网站中的某些标题上应用一些CSS3过渡,但是有一些关于包含文本的元素的转换真的让我感到困惑:在应用提示或网格拟合字体的字形的浏览器中(我想其中大部分都是吧,也许是Safari),在转换的开始和结束处有一个明显的"跳跃",你可以看到文本被快照回到像素网格,如这个jsfiddle所示:http:/ /jsfiddle.net/8csA9/20/(由于过滤,这部分可能是暂时的'模糊',但这里肯定会有一些形状修改,至少在FF和Chrome中)

通常情况下,我甚至不会考虑弄乱字体渲染的复杂性,但考虑到字形是如此之大,我觉得在这种情况下它并不重要,并且想知道是否有一种方法可以禁用提示,或者另一种使这些过渡更平滑的方法.有谁知道这是否可以做到,以及如何做？

PS:这个问题实际上延伸了一点,只是过渡,只是应用静态旋转也使得至少Firefox继续暗示文本,结果看起来相当......奇怪

PPS:似乎存在(或已经存在)'-webkit-font-smoothing'属性,但CSS3-fonts草案似乎已经删除了基于它的规则(font-smooth),而且它似乎只是曾经在Chrome for Mac上工作过

Answer 1

使用backface-visibility:hidden; **更新:webkit moz mz和标准 http://jsfiddle.net/jugularkill/58S2z/4/

有关背面可见性的更多信息:http: //www.w3schools.com/cssref/css3_pr_backface-visibility.asp

Answer 2

这对我来说就像一个魅力.我向具有transition属性的元素添加了"backface-visibility:hidden"(加上主要的浏览器前缀),并修复了我在转换过程中遇到的跳转/抖动.我在Firefox,IE(9/10)和Chrome中测试过.

但我注意到的一件事是:确保将属性添加到元素的自然状态,而不是元素的伪类(例如悬停,活动...).

Answer 3

对我来说，我发现我需要将backface-visibility: hidden和添加transform-style: preserve-3d到包含跳跃内容的元素中。

例如：

.element-with-jumpy-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}