Chrome / MacでDOMの再描画/更新を強制する
時々、Chromeは完全に有効なHTML / CSSを正しく表示しないか、まったく表示しません。多くの場合、DOMインスペクタを掘り下げるだけで、その方法のエラーを認識して正しく再描画できます。そのため、マークアップが適切である可能性があります。これは私が取り組んでいるプロジェクトで頻繁に(そして予想通り)十分に発生し、特定の状況でコードを強制的に再描画するように配置しました。 これは、ほとんどのブラウザーとOSの組み合わせで機能します。 el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none' のように、未使用のCSSプロパティを調整し、再描画を強制する情報を要求してから、プロパティの調整を解除します。残念ながら、Mac向けChromeの背後にいる明るいチームは、再描画せずにそのoffsetHeightを取得する方法を見つけたようです。したがって、他の点では有用なハックを殺します。 これまでのところ、Chrome / Macで同じ効果を得るために思いついた最善の方法は、次の醜さです。 $(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000); のように、実際に要素を少しジャンプさせ、次に1秒間冷やしてからジャンプし直します。さらに悪いことに、そのタイムアウトを500ミリ秒未満に(目立たない程度に)落とすと、ブラウザーが元の状態に戻る前に再描画に取り掛からなくなるため、期待した効果が得られないことがよくあります。 誰かがこの再描画/更新ハックのより良いバージョン(できれば上記の最初の例に基づいたもの)をChrome / Macで動作するように提供したいと思いませんか?