2013-04-27 18 views
14

CSS3でトランジションする特定のテキストで時々発生します。私はそれが起こる理由を知らないので、私はjsfiddleで同じことを再現することはできません。アニメーションと歩道がいつか後に削除される一方でCSS3トランジションがトレイルを残す

しかし、あなたはここで第四スライド(5つのリング付き1)で見ることができ、

http://jashwant.github.io/kickass-slider/

クールテキストは、証跡を残します。しかし、他のテキストは、どんなトレイルも残すことなく大丈夫です。私は問題を見つけることができません。

このトレイルを回避するにはどうすればよいですか?

P.S.(私は、最新のLinuxクロムを26.0.1410.63使用しています) jquery-transitを使ってアニメーション化しています。

画像のCoolを参照してください。

enter image description here

UPDATE:

Here's more detailed answer

+0

これはおそらくChromeのバグです。 27.0.1453.65 beta-mでも同様の動作が見られます。おそらく、テストケースを減らしてバグを報告するべきです。 – Charles

+0

しかし、私はテストケースで同じものを再現することができません。 – Jashwant

+0

Linux版Chromeバージョン26.0.1410.63では、トレイルは表示されません。 – regretoverflow

答えて

22

あなたはバグが修正されるまでの移動は、Chromeでハードウェアアクセラレーションをオブジェクト作ることができます。単にあなたのスライダーオブジェクトの定義にライン

-webkit-transform: translate3d(0,0,0); 

を追加します(:

.slider > li > .object { 

私のテストでは、私はそれを追加しました)。これは私のためにそれを固定した。

+0

あなたの説明以外の解決方法はありません。私はあなたに恩恵を授与しています。あなたは解決策を働かせます。 – Jashwant

+3

私もこの '-webkit-transform:translateZ(0);'に出くわしましたが、jangxxの例と異なる場合は追跡していません。 –

+0

これは私にとっても問題を修正しました...これは美しい修正です!ありがとう! – AdityaSaxena

関連する問題