スタイル伝播の不一致を解決するために WebKit の再描画を強制するにはどうすればよいですか?

強制再描画による WebKit でのスタイル伝播の不一致の克服

WebKit などの最新のブラウザ エンジンを使用している Web アプリケーション開発者は、スタイルが変更される状況に遭遇する可能性があります。 JavaScript を通じて開始されたものは一貫して伝播できません。この課題に対処するために、影響を受ける要素を WebKit に効果的に再描画 (または再描画) させ、適切なスタイルの伝達を保証するソリューションを検討します。

次の JavaScript コードを考えてみましょう。

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

このコード要素 (my_id) の CSS クラスを変更し、その後の要素の外観の更新を期待します。ただし、Chrome と Safari ではこの動作は信頼できず、影響を受ける兄弟の 1 つは、もう一方の変更が成功したにもかかわらず、間違ったスタイルのままになります。

この問題を解決するには、単純な再描画/再ペイント手法を使用できます。要素の表示スタイル (この場合は sel) を一時的に「none」に変更し、その後 offsetHeight (CSS スタイル プロパティ) を参照し、表示を元の値にリセットすることで、WebKit に要素の再レンダリングを強制します。

sel.style.display='none';
sel.offsetHeight; // reference required, discard the value
sel.style.display='';

この手法は、特に「ブロック」表示スタイルの変更に関連するスタイル伝播の不一致を解決するのに効果的であることが証明されています。ただし、他のスタイル変更への適用範囲を拡大するには、さらなる研究が必要になる可能性があります。

結論として、この回避策は、WebKit で再描画/再描画を強制するための信頼できる方法を提供し、動的 ​​UI の実装中に発生する可能性のあるスタイルの不一致を解決します。 Web アプリケーションの更新。この手法を採用することで、開発者は、必要な視覚的な変更がページ全体に正確に反映され、全体的なユーザー エクスペリエンスを向上させることができます。

以上がスタイル伝播の不一致を解決するために WebKit の再描画を強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。