3

だから私は奇妙な状況に陥っています。

css 3 変換を使用すると思われる scale プラグインを使用して、大量のコンテンツをスケールアップする必要がありました。

テキストの下のレイヤーをアニメーション化するボタンをクリックすると、鮮明なアンチエイリアス テキストの「フラッシュ」が表示されます (実際、この時点でテキストも非表示/表示します)。その後、約 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
   });

編集クロムのみのようです。

4

1 に答える 1

1

背景レイヤーの css 変換で Chrome/Safari で同様の問題が発生し、Chrome 37 で動作するフォント スムージング プロパティを追加しました。

-webkit-font-smoothing: antialiased;
于 2014-09-22T15:17:46.590 に答える