Photo by フリー写真素材ぱくたそ
つい先日最新版以外のサポートが終了したIEについて知らなかった挙動なのでメモ書きです。
もうこんな事に頭を悩まされるのも少しの間かもしれませんが一応書いておきます。
起こった問題はタブ切り替えの中に入れたGoogleMap
タブ切り替えをするコンテンツの中に入れたGooglemapが古いIEだと読み込まれないという問題に遭遇しました。ちなみにIE11だけ大丈夫とういもの。
コード自体にはなんの問題もなく、他のブラウザでも表示されています。
そして同じタブ内でも最初に表示されているところのマップは表示されるのでコード自体には問題が無さそう…。
できる人に聞いてみたところ「iframeの読み込みがうまくいっていないみたいだからタブ切り替えのところにiframeを再読み込みすればいい」と宣託をいただきました。やってみるとそれで問題は解決したのですが、いまいち納得できない…。
古いIEではdisplay:none;を使うとタグの機能まで無効化される？
検索で調べてみるとどうも古いIEやAndroid標準ブラウザではdisplay:none;された要素に関しては、表示だけでなくタグ機能まで無効化されることがあるらしいです。
まさか見た目や大きさだけでなく”完全なnone”されるとは…。
つまり、display:none;した要素の中に入っているiframeはもちろん、inputタグなんかも動かないことがあるそうです。
今回僕がはまったようなGooglemapの他にもyoutubeなどの貼り付けにも注意が必要そう。特にyoutubeはiframe player apiが機能しなくなるようです。
サポート終了宣言がされたのでこんな問題が起きることも無くなってくるとは思いますが、一応覚えておこうと思います。。
これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装
– Amazonで見る
