iframeでバグというものを初経験…

  • 投稿日
  • 更新日
  • 著者 michi
  • カテゴリー stady

仕事で初めて使ったiframeとバグ

Progateや本で勉強していて<iframe>は知ってはいたけど、勉強の時に使った記憶はない。

仕事でiframeを使って別のをhtmlファイルを表示させることが時々あるのですが、<iframe src=”” width=”” height=”” scrolling=””>このあたり入れれば表示はさせられる。

表示不具合が起こった時の解決方法は

  • src正しいか確認。
  • 中身の高さとiframeの高さが違ったり、なので“width”、“height”を確認する。
  • 特殊な時に、javascriptを使って後からiframeに“width”、“height”などを追加する。

これでいつもは解決しているのですが、今回はあるのに見えない！？

コードを何度見直しても間違ってない。。。

呼んでるものとサイズは合っている！けど見えない！

スマホの画面の時はいつもChromeのデベロッパーツールのiPhoneで見ている。

（この時はスマホの種類を変えるのは、画面のサイズが変わるくらいとしか思っていなかったのでずっとiPhoneで見ていた）

バグの原因は【iframe】×【Safari】×【fixed】

会社入りたて、iframeよくわからないのでいつまで考えても「見えないものは見えない」ので上司に報告

上司も初めての現象らしく一緒に調べてくれて、二人でググる！！やっぱり上司が先に類似の記事を見つけてくれ私の作ったものと共通あるかの確認をして欲しいと。

記事はSafariでiframeの中身にposition:fixedを使たものの、要素が透明になるバグがある

あ。。。完全に一致！！

試しに”position:absolute“に変えてみる・・・『あっ！！！見える！！！』

と、いうことなので今回はiframeの中身ちょこちょこ直し、”position:absolute”に変更、<iframe>にfixedをつけ解決！

バグってsafariだと起こる、Androidだと起こらない、どれも使い方間違えてないのに今回みたいに色々重なると起こるとか知らなかった〜

私のスマホはAndroid…ってことはスマホで確認してたら、もっと早く見つけられたんだ…

それ以降デベロッパーツールでも”PC”、”SP（iPhoneやGalaxy）”、”Chrome”、”Safari”、”firefox”、”IE”、”実際のスマホ”などなど、プロは色々な環境で確認をするのだなと学びました。

解決策として載っていたのは最初はabsoluteにして、その後fixedに変える方法などがありました。

$(document).ready(function() {
    $(#hogehoge).css({position : absolute});
    setTimeout(function() {
        $(#hogehoge).css({position : ;fixed});
    } , 10);
    // #hogehogeのところにposition:fixed;にしたい要素のIDを入れて下さい
});
CSS HTML jQuery