サイトの作りによってはiframeを使うことは今でもあると思います。

iframeの使用用途としては、
・自分で作ったページをiframeで読み込む
・外部サイトの動画などを読み込む
といった使い方があると思います。

そんな中、今回は自分で作ったページをiframeで読み込んだ際に、
MacのSafariの時に要素が透明化され表示されないといったバグに遭遇したので、
回避方法をご紹介。

発生内容

バグの内容としては、iframeで読み込んだページの要素の一部が見えない！
といった内容になります。

発生条件

筆者が遭遇したケースはすごく稀だと思いますが、以下の条件で問題に遭遇しました。

パソコン側の環境
・OS：OS X 10.9 Mavericks（最新のSeriaではこのバグは出てない模様です）
・ブラウザ：Safari

HTML側の条件
・親HTMLがiframeで子HTMLを埋め込んでいる
・iframeは最初「display:none」に設定しているが、jsで後から「display:block」にしている
・子HTMLの中に「position:fixed」の要素がある

上記の条件で、子HTML内の「position:fixed」にしている要素が透明になってしまいました。

 

解決策

筆者は一つ目の方法で解決できましたが、二つ目の方法でも解決できるような気はしています。

一つ目

子HTML側で「position:fixed」の要素をCSSで「position:absolute」として設定し、
javascriptで「position:fixed」に設定し直す

以下のコードを子HTML側に記述する

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

※jQuery必須

おそらくこれで解決できるはずです。

 

二つ目

この現象、おそらくiframeが非表示になっているのが問題なんだと思います。

なので、iframeをjavascriptで表示にする際にsrcに読み込ませたいページのURLを書き換えてあげることで問題は発生しないと思うのですが、この方法は試していません。

もし試されたことがある方がいたら、コメントなどで教えていただけるとすごく嬉しいです！

 

 

おわり！