3

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

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

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

休息时左侧,右侧前 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
   });

编辑似乎只像 chrome。

4

1 回答 1

1

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

-webkit-font-smoothing: antialiased;
于 2014-09-22T15:17:46.590 回答