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)); }