4

私は本当に奇妙なバグに遭遇しました。カーソルを持って選択するまで背景色が消える要素があります。

ここにページがあります: http://austinpray.com/test

ビデオはこちら: https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov

妙にスクリーンレコーダーを使用している場合は問題が発生しないため、ビデオはiPhoneで撮影されています。クロムの内部でのみ発生します。私はクロムとクロムの空のインストールの両方を試しましたが、すべてのキャッシュがクリアされ、これはまだ発生します。

私は何が欠けていますか？さまざまなデバイスでさらにテストを行うと、更新されます。

編集 (2013 年 5 月 22 日):

さらに調査を行ったところ、次の動作が見つかりました: https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov

アニメーションとスクロールが同時に発生すると、問題が発生するようです。

ここの問題でサイト全体を凍結しました：ミラー

編集：

例

これは、実際に機能する私のコードの簡素化されたバージョンです。

デモ

この問題はこの問題にはありません。次のデモと問題の原因となっているコードの違いは何ですか? 視差の背景コードを削除しようとしましたが、問題は解決しません。私は現在、メニュー全体の css を書き直して、単純なものを見逃していないかどうかを確認しています。

4

2 に答える 2

16

一時的な回避策

クロムが要素（特に固定要素）をレンダリングする方法についてTONを学んだ後、私はこの一時的な解決策に出くわしました：

-webkit-transform: translateZ(0);

これをナビゲーション バーのスタイルに追加しました。これは基本的に、ページに何もせず、GPU アクセラレーションをオンにする風変わりな小さなハックです。これは、Chrome が更新されるか、メニュー バーの機能全体を書き直すまで、今のところ実行する必要があります。唯一の欠点は、ウィンドウのサイズを変更するとパフォーマンスが低下することです。

よりエレガントなソリューション

このすべての調査とトラブルシューティングの後、唯一の本当の問題は、クロムが任意のポイントで停止してアーティファクトを残すのではなく、要素を完全に再描画する必要があることであることがわかりました。純粋な CSS ソリューションではパフォーマンスの問題が発生するため、jQuery を介してブラウザーに要素を強制的に再描画させる優れた方法を見つけました。

$.fn.redraw = function(){
    $(this).each(function(){
        var redraw = this.offsetHeight;
    });
};

展開されたページでこれを使用していますが、パフォーマンスが低下することなくうまく機能しているようです。クロム 27 がまだ浮かんでいる限り、私はそれを維持します。

また、奇妙な動作と、おそらく問題の根本を発見しました。

chrome の about:flags セクション (chrome://flags/)で固定位置要素の合成を有効にすると、この問題は発生しません。Chrome バージョン 27.0.1453.93 を実行しています。

概要:フラグの設定

私の問題は、クロムが固定要素のスタックコンテキストを処理し、ブラウザがスクロールするときに固定要素をアニメーション化する方法に何らかの形で関連しています。この記事では、変更点について少し詳しく説明します。

Chrome が合成を処理する方法

合成に関連する GPU アクセラレーション

于 2013-05-23T02:38:24.873 に答える
5

この問題を検索したときにこの回答が最初に表示されたので、問題をより完全に解決すると思われる別の回答にリンクすると役立つと思いました。

https://stackoverflow.com/a/12023155/2192201

クリックしたくない場合は、アニメーション中のアーティファクトを防ぐために必要だったのは、次の 1 行の css だけでした。

-webkit-backface-visibility: hidden
于 2013-11-18T14:24:22.933 に答える