iframeのloadイベントのタイミング

お客さんの要望に応えるために、財務データを表にして iframe で読み込んで一ページに４つほど並べて表示しました。
表は、縦スクロールしたくない（横スクロールはＯＫ）ということなので、スクロールバーを含む高さを求めるために iframe の load イベントで、ScrollHeightやら何やらをごにょごにょと計算して iframe の height を設定していたのです。

初期リリースでは、キャッシュの問題を除いて問題はありませんでした。（キャッシュ参照されると loadイベントが来ません。これはまた、別の話題ということで。。。）

ところが、表の修飾をするために、外部スタイルシートを読み込む様にしたところ、Firefox44・IE11では問題なかったのですが
Chrome48では、４つの表の内、３つで高さが２倍以上になってしまいました。（表の下に表の高さと同じくらいの空欄が出来てしまったのです。）

デベロッパーツールで確認すると、表の高さ通りに高さを設定できているのは、最後に load イベントが呼ばれたモノでした。
つまり、他の３つは 高さが確定する前に load イベントが呼ばれているのではないか、と思われます。

ところで、初期リリースでは、CSSは最小限のモノしか使っていなかったので、style 要素に記述していました。これだと問題は発生しません。

ということで、初期リリースと同じように、外部スタイルシートではなく style 要素を使用することで回避した次第です。

初級WEB開発者の覚え書き、でした。