何らかの理由で、Chrome (最新ビルド) でブラック ボックスがランダムなスペースに表示されます。
これらのボックスの一部はメイン コンテナの外に表示されますが、一部はインラインで表示され、コンテンツ ブロックを覆います。通常はスクロール後にランダムに表示され、インスペクタを開いたとき、要素の上にカーソルを置いたとき、または下にスクロールして元に戻したときに消えることがよくあります。
参考までに、いくつかのアニメーション、box-shadows (うまくいかずに無効化されました)、線形グラデーション、および位置: ページ上の固定要素がありますが、これは Chrome 以外のブラウザーでは問題になりません。
これはユーザー テストで広く報告されていますが、私は修正を思いつくことができませんでした。サイトは比較的軽量で、16 GB RAM を搭載した新しいラップトップでブラウジングしているため、CPU の問題なのかグラフィック カードの問題なのかはわかりません。4 GB の RAM を搭載した古い Mac Mini では、この問題は発生しません。
どんなポインタでも大歓迎です。
更新: これは Chrome のバグであり、修正されました: https://code.google.com/p/chromium/issues/detail?id=142038
eddz は crbug.com/new で問題を報告し、40 人以上がチケットにスターを付けてフォローしました。これにより、エンジニアリング チームによる Chrome の個別の修正がいくつか行われました。
transformZ (0)GPU レンダリングを強制するために使用していた Web サイトでこの問題が発生しました。このスタイルを削除すると、問題はなくなりました
これは答えではありませんが、何らかの形で再現できる場合は、後でおそらく次のようになります。
ページのコピーをローカルまたは任意の場所に作成し、ベース href をメイン ドメインに設定し、css リンクと js スクリプトを下から上に削除し始めます。削除した最後のスクリプト/スタイルシートが原因です。
犯人ファイルが見つかった場合は、犯人行/セクションを見つけてみてください。
その点に到達しない場合、それはブラウザである可能性がありますが、そうではないようです。
また、スクリプト/スタイルシート間でリンクされているか、誤って継承されている可能性があります。
私たちのウェブサイトでも、この奇妙なブロックを経験しました。以前はトランジションを使用していましたが、トランジションは別のバグ「奇妙な線」をページにランダムに表示し、スクロール中に消えることを再現していました。
ここで、transformX-Y の使用を開始します。一部の場所では Z も使用される可能性があります。そして、この地獄のブロックを手に入れました。
トランスフォーム + トランジション アニメーションを使用する Chrome では、何か問題があるようです。一度にアニメートされるブロックが多すぎると、このバグが発生する可能性がありますか?
FFは正常に動作します。