CSS + jQuery Transform 插件：如何修复模糊文本答案

【问题标题】：CSS + jQuery Transform plugin: how to fix blurry textCSS + jQuery Transform 插件：如何修复模糊文本
【发布时间】：2012-08-04 23:57:12
【问题描述】：

所以我遇到了一个奇怪的情况。

我不得不使用 scale 插件来扩展一大堆内容，我想它使用 css 3 转换。

当我单击一个按钮，该按钮为文本下方的图层设置动画时，我会看到一个清晰的抗锯齿文本“闪烁”（实际上，我此时也隐藏/显示文本）。大约 500 毫秒后，所有的文字都变模糊了。我可以一遍又一遍地重复这个。真正奇怪的部分是在底层完成动画之前它会变回模糊。现在，我希望如果这是“添加转换的延迟”，那么新文本一开始不会是“正确”的大小，但一开始是正确的。

    /* I've added this, too:*/
        -webkit-font-smoothing: subpixel-antialiased;

    /* also tried */
        -webkit-transform-style: preserve-3d;

    // the basic implementation of the transform using jQuery 2D transform plugin
    $("#container").transform({
        origin: ['50%', '0px'], 
        scaleX: _scaleY,
        scaleY: _scaleY
    });

   // tried this too, but doesn't seem to do anything at all
   $('#container').animate({
       transform: 'scale(' + _scaleY + ')',
       time:.5
   });

EDIT 好像只有 chrome。

【问题讨论】：

所有浏览器都会出现这种情况
好点。刚刚在FF和IE9中试过，看起来还可以。以上结果在 Chrome 中。
我想我在某处读到 Chrome 有自己的字体平滑引擎。不要引用我的话。
Scale 插件/CSS3 实现仍然需要一些工作。我注意到，在发生图像 src 交换或将新图像添加到 DOM 的地方，元素会在 Firefox 中“快速”到位。加上模糊的东西。 jQuery.effects.scale 也好不了多少。是的，在 FF 中也打破了 flash。
所以我不得不忽略 Firefox，因为它不支持正确缩放，但我发现我可以非常小心地使用浏览器“缩放”（CSS3 缩放）在 chrome 中根据需要重新缩放页面/IE。当然可能应该是一个更流动的布局，它被设计成一个特定的维度规范——后来必须是流动的。

标签： jquery css transform antialiasing

【解决方案1】：

我在 Chrome/Safari 中在背景层的 css 转换和添加在 Chrome 37 中工作的字体平滑属性时遇到了类似的问题。

-webkit-font-smoothing: antialiased;

【讨论】：