getComputedStyleは、要素の作成直後にピクセル値に対して 'auto'を返すのはなぜですか？

Question

私はいくつかのHTMLを生成するためにMustacheを使い、insertAdjacentHTMLを使ってそれをページに配置しました。それは後でdocument.querySelector('.contentarea')呼び出しを使用してそれに対処することができるので、明らかにDOM構造に変換されました。しかし、幅または高さのピクセル値を取得しようとすると、'auto'が返され続けます。

getComputedStyleで問題が発生する可能性がありますので、代わりに.getBoundingClientRectと.offsetWidthを試してみました。どちらも0です。 setTimeout(function(){}, 1)の中にコールを置くことでコールを少し遅らせると動作しますが、これは同期コンストラクタ内に入る必要があるため、私のプロダクションコードでは実用的ではありません。

これはFirefox（Aurora）とChromeの両方で発生しています。 私は、Mozillaが怠惰なフレーム構造を使用してDOM操作のパフォーマンスを改善する方法についての記事を読んで思い出したし、フレームは少しすぎ怠けているとバグがあるかもしれないと思ったが、それは同様Chromeで起こっているので、それは可能性が低いと思われます。

誰もがここで何が起こっているのかについての任意のアイデアを持っていますか、それを回避する方法？ HTMLを挿入した直後のピクセルの高さ/幅の情報が本当に必要です。

PS：任意のブラウザでは、別のスレッドでDOM解析/建物にHTMLをしますか？私はこのような振る舞いを引き起こすかもしれないと考えていました。

NEVERMIND：それは私自身のせいでした。コードを測定しようとする前に設定されたdisplay: none;スタイルに気付かなかっただけです。

Answer 1

「自動」の結果を引き起こす可能性のあることがいくつかあります。あなたはそれらの1つを見つけました。 display: none。要素がインラインの場合、autoも返されます。

本質的には、block又はinline-block要素でなければならず、それがレンダリングされなければなりません。

Answer 2

私の経験では、多くのブラウザ（IE、Chrome、Firefox）は、Javascriptスレッドが終了するか、タイムアウト呼び出しによってyieldされるまで意図的に計算レイアウトを遅らせます。

私が知っている解決策は、ブラウザに出力して再起動することだけです。 setTimeoutを使用する方法はうまくいきます。