アニメーションのあるウェブサイトがあります。
アニメーションがクロムで実行されると、クロムは要素領域の再描画に失敗したように見え、要素があった場所にトレースラインが残ります。
なぜこれが起こっているのか誰かが知っていますか、そしてどうすればこれを修正できますか?
3 に答える
私は自分でこの問題に遭遇しました、そしてグーグルの助けを借りて、私はそれを再現するjsFiddleと一緒にこの問題に関連するフォーラムスレッドを見つけることができました。(スレッドによると)この問題はバージョン23で修正されているようです。バージョン22.0.1229.94 mを使用していますが、ブラウザで問題が発生します。以前のバージョンのChromeでこの問題を解決するためにできることがあるかどうかはわかりません。バージョン23が最新の安定版になり、すべてのユーザーがブラウザのバージョンをアップグレードするまで待つ必要があると思います。
私は知っています、このバグは奇妙です...パフォーマンスに影響を与えない最も簡単な回避策は、ドラッグ可能/アニメーション化された要素またはコンテナのいくつかのスタイルプロパティを設定することです。
border または Outline プロパティを設定することで修正できるはずです。例えば:
//body, .draggable
$(selector).css('outline', '1px solid transparent');
Google Canary をお試しください。https://tools.google.com/dlpage/chromesxs
ここで発生していない場合は、そのままにしてください。彼らはすぐにパッチを当てます。css3 トランジションに問題があります (特に、画面から始まるものをアニメーション化すると、ティアリングが残り、見栄えが悪くなります。
本当に必死な場合は、要素を非表示にしてから表示すると、通常は元の位置に戻りますが、これは素晴らしい解決策ではありません。