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

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

Mac Safari

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

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

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

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

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

iframeを表示させた後の正しい表示。あるべき表示はコチラ。
正しい表示
灰色の、「ここがFixedエリア」が表示されていますね。これが正しい。

一方、Safariでiframeを表示させると…
正しくない表示
灰色の部分がナイ。見当たらないですね。

対応方法

修正方法は下記の通り。

  • fixedエレメントのpositionを別のもの(absoluteなど)に変更する
  • その後、fixedに戻す。ただしこの時、setTimeout()を使わないといけません。
[javascript]
var iframe = document.getElementById(‘target_frame’);

iframe.style.position = ‘absolute’;
setTimeout(function(){
iframe.style.position = ‘fixed’;
}, 0);
[/javascript]

position:fixedは意外と鬼門

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

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

コメントを残す

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