WebKit がスタイルを自動的に更新しないのはなぜですか? 強制的に再描画するにはどうすればよいですか?

WebKit によるスタイルの更新の強制

JavaScript を通じて適用されたスタイルの変更が、影響を受けるすべての要素に反映されないという問題に直面しています。 Chrome や Safari などの WebKit ベースのブラウザ。これは、複数の要素が、フォーカスを持つ子を持つ共通の祖先からスタイルを継承する場合、またはリンクなどのインタラクティブな要素を含む場合に発生することがあります。

WebKit の応答性

WebKit は継承されたスタイルの更新を受信すると、自動的に再描画されます。これは、これらの変更をよりシームレスに処理する Firefox、Opera、IE などの他のブラウザとは対照的です。

ナッジによる再描画の強制

WebKit が更新されないためスタイルが自動的に設定されるため、ページ上の要素にわずかな変更を加えることで強制的に再描画することができます。 Chrome デベロッパー ツールでは、任意の要素の属性のチェックを外して再チェックしても、正しいスタイルの更新がトリガーされることがわかりました。

提案された解決策

プログラムで再描画を強制するには場合は、次のテクニックを使用できます:

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

このアプローチでは、一時的に非表示にしてから、要素を再表示します。 offsetHeight 行により、ブラウザが実際に変更を適用することが保証されます。返される高さを保存する必要はありません。

潜在的な制限

提供されたソリューションは、「ブロック」表示の要素に対して機能することが確認されています。他の表示モードの要素では異なる動作を示す可能性がありますが、これにはさらなる調査が必要です。

以上がWebKit がスタイルを自動的に更新しないのはなぜですか? 強制的に再描画するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。