22

文字間隔プロパティの素敵な CSS トランジションを作成しようとしています。

Firefox と Internet Explorer 10 では見栄えがします (最終的に IE で期待どおりに動作するものがあります。ああ、そうですか?)

ただし、Chrome や Opera では機能しません。Chrome では一連のジッターであるため、2px から 1px から 0 になります。IE/Firefox のような滑らかなピクセル レンダリングはありません。

Chromeをスムーズにレンダリングさせる方法はありますか?

簡単な例を次に示します。

p {
    letter-spacing:2px; 
    -webkit-transition: letter-spacing, 1s;
    -moz-transition: letter-spacing, 1s;
    -o-transition: letter-spacing, 1s;
    transition: letter-spacing, 1s;
}
p:hover {letter-spacing:0;}

http://jsfiddle.net/aDhRz/

4

7 に答える 7

2

この問題は現在 Blink (Chrome レイアウト エンジンを強化) で修正されていますが、安定した Chrome ではまだ展開されていません。しかし、Chrome Canary では問題なく動作していることがわかります。

誰もが利用できるようになるまでは、JavaScript を使用したソリューションがなければ回避策はないと思いますcanvas。Chrome の自動更新は幸運です :)

まばたきの修正: http://src.chromium.org/viewvc/blink?view=revision&revision=153727

このバグは 2008 年から WebKit に存在し、まだ修正されていないため、Google は Blink の開発を真剣に考えているようです。

WebKit バグ レポート: https://bugs.webkit.org/show_bug.cgi?id=20606

于 2013-09-10T13:10:31.650 に答える
0

あなたの例では、トランジションが1px各ステップで減少するため、スムーズにすることはできません。ピクセルを使用する他のcssプロパティと同じように機能します。ピクセルを増やすと、この例のデモpxのように実際にスムーズにレンダリングされることがわかります

このようなピクセルのマイナーな変更を、長期間の別のピクセル プロパティに追加すると、このデモのように、同じステップの可視化効果が見られます。

したがって、これが可能な唯一の方法は、クロムにステップを次のように変更するように指示できる場合ですが0.1px、残念ながらそれはできません。

つまり、そのような (変更 + 遷移) の組み合わせを追加すると、すべてのプロパティで同じことが行われることがわかります。これはバグではありません。

于 2013-09-09T09:36:50.543 に答える
0

px の代わりに em を使用してみてください。完全ではありませんが、改善されています。また、より速い速度はびくびくしているようには見えません。

p {
letter-spacing:0.5em; 
-webkit-transition: letter-spacing, 0.5s;
-moz-transition: letter-spacing, 0.5s;
-o-transition: letter-spacing, 0.5s;
transition: letter-spacing, 0.5s;
}
p:hover {
letter-spacing:0em;
}

http://jsfiddle.net/Q7Cvd/

于 2013-09-09T11:41:56.987 に答える
-2

これを試して

p {
    letter-spacing:2px; 
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
p:hover {letter-spacing:0;}
于 2013-09-06T11:17:38.787 に答える