モーダルウィンドウをfixedするとiOSのカーソルがズレる問題

iOSでfixedした要素内のinputにフォーカスするとカーソルがズレるバグがあります。

Bug 176896 - Wrong caret position for input field inside a fixed position parent on iOS 11
https://bugs.webkit.org/show_bug.cgi?id=176896

困ったので色々調べました。

まず、

.modal {
   position: absolute;
}

メディアクエリなどでPCには

.modal {
   position: fixed;
}

とします。

これでバグは消えるけれど、モーダルウィンドウな挙動をしてくれなくなるので、スクロールを止める方法で対応します。

i0S以外には

body {
    overflow: hidden;
}

で効くっぽいけれど、iOSは

body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

の4つを指定しないと駄目でした。iOS11.2.2で確認。

モーダルウィンドウを出す時だけにしたかったので、jQueryで

$(function(){
    $('.open-modal').click(function(){
        $('body').css('overflow','hidden').css('height','100%').css('width','100%').css('position','fixed');
    });
    $('.close-modal').click(function(){
        $('body').css('overflow','visible').css('height','auto').css('width','auto').css('position','static');
    });
});

としました。ホントはpositionのほうはiOS判別入れるべき？かな？

参考にしたURLの書き込みでは

document.body.style.overflow = ‘hidden’;
document.body.style.height = ‘100%’;
document.body.style.width = ‘100%’;
if (osIsiOS()) {
 document.body.style.position = ‘fixed’;
}

となっていたけれど、モーダル画面の場合はPCでfixedされても問題ないので判別無しにしてます。

bodyをいじってたら、PCでmodalをfixedになおさなくても良いかもしれないけれど未確認。

なんとかなったけれど、気持ち悪い・・・。
CSSのみで解決させたい・・・。

早く治ってこのバグ。

参考URL：
https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

---

追記：

フォーカス2回しないとカーソルが出ないぽいです。1回目のタッチだとカーソルが表示されない・・・。