IE11でiframeを使うと画像サイズ値がおかしくなる

こんばんは、ころすけ(@wg_koro)です。

IE11ロゴ

先日、IE11がリリースされましたね!軽く触ってみましたが、動作がかなり高速になっていて、なかなかいいなーといった感想です。

…が、やっぱり変なバグはあるわけで。今回はそのお話。

javascriptでiframe内の画像サイズを取得しようとすると、デタラメな値が返る

…という現象に出くわしました。具体的には、下記の通り。

  1. 画像を貼り付けた「ページA」を用意する。例えば、320×320の画像を貼り付ける。
  2. ページBで、iframeを作る。iframeのsrcはページA。
  3. 作ったiframeをdisplay:noneにして隠す。
  4. display:noneにしている間に、ページA内でjavascriptを使って画像のサイズ(width, height)を取得。

さて、ここで取得した画像サイズは何になるでしょう?従来通りゼロが返る?それとも正しい値(320×320)?

実際にやってみましょう。
1秒毎に、画像サイズを画面に描画するデモを作ってみました。IE11で下記デモページを開き、数秒経ってから「iframe表示」ボタンを押してみて下さい。
デモページ

IE11で実行すると、こうなります。※画面キャプチャー
IE11_画像サイズデタラメ

この時は16秒間iframeを非表示にしていました。非表示にしていた16秒まで、値が186246752…といったとんでもないデタラメな値が返ってきます。なんじゃこりゃ。

display:noneを解除すると、その瞬間から正しいサイズ(320×320)が返ります。これだったら、従来通りゼロが返ってきてくれたほうがはるかにマシだわ…。

結論:IE11の場合、iframe内で画像を動的に操作する場合は気をつけましょう

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください