Mac, Program

Mac Safariでiframeとposition:fixedを使うと要素が消失する

こんばんは、ころすけ(@wg_koro)です。

ページを作っていたら変な現象に遭遇しました。今回はIEじゃなくてSafari。MacのSafari。

iframeとposition:fixedの組み合わせで要素が透明になる

iframeを作る
iframeの中のページで、position:fixedにしたエレメントを作る
1で作ったiframeをdisplay:noneで隠す
jsでiframeを表示する

こうすると、4で表示したiframeの中からfixedの要素が消えます。というか、fixedの要素が透明になっています。ナニコレ。

Mac Safariをお持ちの方はこちらでお試し下さい。
→ デモページ

iframeを表示させた後の正しい表示。あるべき表示はコチラ。

灰色の、「ここがFixedエリア」が表示されていますね。これが正しい。

一方、Safariでiframeを表示させると…

灰色の部分がナイ。見当たらないですね。

対応方法

修正方法は下記の通り。

fixedエレメントのpositionを別のもの(absoluteなど)に変更する
その後、fixedに戻す。ただしこの時、setTimeout()を使わないといけません。

    var iframe  = document.getElementById('target_frame');

    iframe.style.position   = 'absolute';
    setTimeout(function(){
        iframe.style.position   = 'fixed';
    }, 0);

var iframe = document.getElementById('target_frame');

iframe.style.position = 'absolute';

setTimeout(function(){

iframe.style.position = 'fixed';

}, 0);

position:fixedは意外と鬼門

position:fixedは便利故によく使いますが、結構バグが出やすい感じ。でも便利なので使うんですけどねー。

Safariで要素が消失/透明になった時はお試しあれ。

2013年10月31日｜ Posted in Mac, Program ｜ No Comments »　

＜【photo】Mavericksインストール中… ブログのトップURLが間違ってGoogleに登録されてしまったどうしよう＞

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。