iOS9-同じ問題。
TLDR-問題の原因。解決策は、下にスクロールしてください
にフォームがありました position:fixed
ID = 'subscribe-popup-frame'のiframeに
元の質問のとおり、入力フォーカスでは、iframeは画面の上部ではなくドキュメントの上部に移動します。
同じ問題は、ユーザーエージェントがideviceに設定されているSafari開発モードでも発生しませんでした。だからそれはそれがポップアップしたときにiOS仮想キーボードが原因であるようです。
コンソールがiframeの位置をログに記録することで何が起こっているのかをある程度$('#subscribe-popup-frame', window.parent.document).position()
確認できました(例:)。そこから、iOS {top: -x, left: 0}
が仮想キーボードがポップアップしたとき(つまり、入力要素にフォーカスしたとき)に要素の位置を設定しているように見えました。
だから私の解決策はその厄介なことをすることでした -x
、符号を逆にしてから、jQueryを使用してそのtop
位置をiframeに戻すことでした。より良い解決策があればそれを聞きたいと思いますが、数十の異なるアプローチを試した後、それが私のために働いた唯一のものでした。
欠点:x
iOSが要素の位置に悪影響を及ぼすと、最終値を確実にキャプチャするために、タイムアウトを500ミリ秒に設定する必要がありました(これよりも少ないと安全です)。その結果、体験は非常にぎくしゃくします。。。しかし、少なくともそれは動作します
解決
var mobileInputReposition = function(){
//if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
if(screen.width < 769){
setTimeout(function(){
var parentFrame = $('#subscribe-popup-frame',window.parent.document);
var parentFramePosFull = parentFrame.position();
var parentFramePosFlip = parentFramePosFull['top'] * -1;
parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
},500);
}
}
それからちょうど呼び出すmobileInputReposition
ようなものに$('your-input-field).focus(function(){})
し、$('your-input-field).blur(function(){})