Warning: count(): Parameter must be an array or an object that implements Countable in /home/c9022685/mamotaku.com/www/public_html/__wp/wp-includes/post-template.php on line 284
MacのSafariでiframeが表示されない|MaMoTaKu(Blog)〜まもたくのぶろぐ

MacのSafariでiframeが表示されない

カテゴリー:javascript,PC

Macのsafariで遭遇したバグで、iframeが表示はされているけどなぜか透明になっている、、、
ただこれはsafariの仕様(てかバグ?)なので、javascriptで対応しましょう

この透明になってしまう条件はMaMoTaKuが確認した時は以下の状態でした
・iframeにdisplay:noneをかけている
・iframeの中の要素で、position:fixed;をかけているものだけが透明になる

この2つだったと思います

解決策

解決策としては、position:fixed;だけが透明になってしまっているので、
それをabsoluteなどで代用できるならjsを書かなくてよいのですが、
必要だからfixedにしてると思うので、こうしましょう

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

ここで重要なのは、fixedにしたい要素を一回
「absolute」にして、setTimeoutでfixedにしてあげれば最初はabsoluteで表示されていてもdisplay:none;しているおかげで
見た目的にも問題ないし、読み込まれてから0.01秒後にfixedにしてるんだから人の目じゃ変化がわからないでしょう笑
(回線の都合でおかしくなるものは、jsが悪いんじゃなくて回線が悪いんです笑)

これでsafariでiframeの中のfixedが透明になってしまうバグはかいひできますたね笑!