社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。

modalの背景色が全体に適応されない時…。

iPadなどIOSのサファリでモーダルの背景が崩れるのを何とかする

原因

cssの-webkit-overflow-scrolling: touch; やtransformなどのプロパティが入ってると親が変わってしまって、modalが崩れることがあるらしい。

対策

ということで、 モーダルをbody直下に移動させる様に実装しました。

function moveModalAfterBody() {
     $(".modal-wrapper").insertAfter("body");
}

したのですが、ちょっと上の階層のクラスが足りなくて、 文字の大きさやフォントが変わってしまったので下記に変更。

function moveModalAfterBody() {
     wrapper = "<div class='needed-class-name'/>";
     $("body").append($(".modal-wrapper").wrapAll(wrapper));
}