スポンサードリンク

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()を使わないといけません。

position:fixedは意外と鬼門

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

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

Facebookページ / スポンサードリンク
2013-10-31 | Posted in Mac, ProgramNo Comments » 
Comment





Comment



スパム対策のため、コメントする際は下記の計算式を埋めてください。 計算式の有効期限が切れました。計算式の隣にある再読み込みボタンを押してください。