私は、この大きなhtmlで何が起こっているのかを理解しようとして、自分自身を破壊してきました。最新の Firefox、Safari、および chrome canary では正しくレンダリングされますが、通常の chrome ではこれらの奇妙な行がレンダリングされ、その理由がわかりません。
コードの抜粋を使用して JS フィドルを作成しました。これははるかに大きなプロジェクトの一部ですが、アプリだけでなくフィドルでもレンダリングの問題が発生しています。参照用に、フィドルで見ているもののスクリーンショットを添付しました。
バグのスクリーンショット:
赤い中央の線は、「閉じる」の左側の線と同様に存在しないはずです。これはほんの一例です。モーダルにマウスを合わせると、いたるところに線が表示されます。
再現が難しいため、恒星とは言えない質問になります。ブラウザのサイズを変更すると、エラーが表示されやすくなります。私のフィドルには、かなりの量の html と css があります。誰かが実際にそれをくまなく調べて問題を解決するとは思っていません。問題の提示を徹底したいだけです。
オンラインで調べてみましたが、私が知る限り、同じ問題を報告している人を見つけることができませんでした.
これを引き起こしている可能性のあるもの、それを修正する方法、または関連するリンク/SOの質問を私に指摘する方法について誰かがアイデアを持っている場合、私は非常に感謝しています.
私が除外/調査したこと: - jsfiddle に抽出したため、ページ上の他の何かが原因ではなく、まだ発生しています。アプリのコンソールを使用して本文のコンテンツも削除しましたが、違いはありませんでした。-グラデーションまたはトランジションが原因であるとは思わない.それらを削除しても効果がないように思われた-おそらく/おそらく絶対配置に関連している? メインラッパー要素の絶対位置を削除したとき、これが発生していることはわかりませんでした。- これらの要素に z-index を適用すると役立つかもしれないと読みましたが、これらの問題には何もしませんでした。
TL,DR: css3 グラデーション、シャドウ、トランジションを自由に使用すると、カナリアやサファリではなく、google chrome が絶対配置要素でレンダリング エラーを表示するのはなぜですか?