スポンサードリンク
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()を使わないといけません。
|
1 2 3 4 5 6 |
var iframe = document.getElementById('target_frame'); iframe.style.position = 'absolute'; setTimeout(function(){ iframe.style.position = 'fixed'; }, 0); |
position:fixedは意外と鬼門
position:fixedは便利故によく使いますが、結構バグが出やすい感じ。でも便利なので使うんですけどねー。
Safariで要素が消失/透明になった時はお試しあれ。
IE11で変わったActiveXObject、attachEventやUser Agentに対応してみるComment