動作の小さな例を作成しました。基本的に、左側に拡張可能なペインがあるページがあります。展開すると、Chrome が CSS の更新に失敗しているようです。
この例では、左側のパネルを展開する緑色の四角形をクリックします。css クラスは JQuery を介して右側のパネルに削除されます。何らかのレイアウト アクションが発生するまで、CSS クラスは適用されないようです。たとえば、ページのサイズを少し変更したり、開発者ツールを開いてランダムな CSS のチェックを外したりします。そのアクションを実行すると、青い長方形の端が本来あるべき場所にジャンプします。
あるクラスの !important が他のクラスをオーバーライドすることに関連しているようです。
最初は、次の 2 つのクラスがあります。
#main-content-right{
min-width:200px;
padding:0 15px 0 100px;
margin-bottom:10px;
z-index:1;
min-height:300px;
}
.main-content-collapse-right{
padding:0 150px 0 29px !important;
}
その後、後者は削除されます。
私のハック関数の行のコメントを外すと、修正されます。基本的に2つの質問があります。
1) これはブラウザ自体のバグですか? 2) ランダムな CSS を切り替えるよりも良い解決策はありますか?
編集: 質問 1 に対する答えは「はい」のようです: https://bugs.webkit.org/show_bug.cgi?id=93876簡易デモ: https://bug-93876-attachments.webkit.org/attachment。 cgi?id=158063