MacのSafariでiframeが表示されない
カテゴリー:javascript,PCMacの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が透明になってしまうバグはかいひできますたね笑!