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

Question

所以我有一个奇怪的情况。

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

当我点击一个动画文本下面的图层按钮时，我会得到一个清晰的反锯齿文本“闪光”（实际上，我此时也隐藏/显示文字）。然后大约500毫秒后，所有文本都变回模糊。我可以一遍又一遍地重复这一点。真正的WEIRD PART是它在底层完成动画之前回归模糊。现在，我希望如果这是“添加转换的延迟”，那么新文本最初将不是“正确”大小，但在开始时它是正确的。

    /* 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
   });

编辑似乎只有chrome。

Answer 1

我在Chrome / Safari中对背景图层的css转换有类似的问题，并在Chrome 37中添加了字体平滑属性。

-webkit-font-smoothing: antialiased;