Mac, Program

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

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

ページを作っていたら変な現象に遭遇しました。今回は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で要素が消失/透明になった時はお試しあれ。

関連記事