新しくリリースされたiOS 11のHTML入力のバグにより、固定コンテナに入力要素があるWebサイトで問題が発生しています。正確に何が起こっているのか、いくつかの考えられる回避策があります。
固定コンテナ内にあり、それがブラウザのスクロールのためにキーボードのスペースを作るために画面の下部に十分近い場合、カーソルはテキスト入力の外側に置かれます。コア機能の1つは、固定されたモーダルダイアログを介したユーザー入力に依存しているため、これは私たちにとって重大な問題でした。
コア機能の1つは、固定されたモーダルダイアログを介したユーザー入力に依存しているため、これは私たちにとって重大な問題でした。
今のところno完全な修正があります。 2つの一時的なオプション:
position: absolute
に変更(推奨されません)オプション2の詳細:たとえば、ダイアログが開いたときにルートdiv(またはスクロールバーを持つもの)をoverflowY='hidden'
に設定し、ダイアログが閉じたときに元のoverflowY=''
に戻すことができます。 (欠点:ダイアログ/モーダルを開くと、ブラウザが上部にスクロールされます)
注意:
この解決策は、IOS model。
最初に対象とするのは、このコードを持つデバイスのみIOSです。
//target ios
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
}
}
if(isMobile.iOS()) {
jQuery('body').addClass('Apple-ios');
}
次に、このコードをcssに配置します。
body.Apple-ios.modal-open {
position: fixed;
width:100%;
}
wordpressとキャッシュプラグインを使用している場合、すべてのキャッシュを空にする必要があります。
これがお役に立てば幸いです。
これがあなたが直面している問題とまったく同じかどうかはわかりませんが、この解決策はうまくいきました:
.modal-open {position:fixed;}
このバグはiframe入力にも影響するので、見つけた修正はモーダルにも役立つと思います。
行う必要があるのは、iframe内の入力に次のCSSを適用することだけです。
input:hover {
cursor: text
}
以下に例を示します。 https://codepen.io/ryanoutloud/project/full/AEKGjj
このソリューションは、IOS11の入力の問題を修正するのに役立ちました。 https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x
また、モーダル内でスクロールしようとすると、迷惑な背景スクロールが修正されます:)
要約:ページのトップへの移動を防ぐために、ポップアップを閉じた後、position:fixedをbody、cache window.pageYOffsetに追加し、キャッシュされた位置にスクロールします。
私は同じ問題を抱えていたので、私の答えを見てみましょう、多分それはあなたを助けるでしょう: https://stackoverflow.com/a/46954486/8775824
fixed
header/banner要素内にログインフォームがあるこのiOSバグがありました。ログインフォームでモーダルウィンドウを開くために、ヘッダー内にbutton
があります。実際のモーダルウィンドウはabsolute
に配置されますが、ヘッダー/バナー要素はfixed
です。
数行のコードで簡単に解決できました。だから私はfixed
コンテナをabsolute
に変更していますが、ログインフォームが開いているときのみ、入力マーカーで魔法をかけています。
jQuery:
$('.ios #mob-login').on('click', function(){
$('body').toggleClass('login-open');
});
CSS:
.ios body.login-open #banner-wrapper {
position: absolute;
}
そのため、固定ヘッダーは絶対になりました。 iOSで、ログインボックスが開いている場合のみ。
同様の問題がある場合、これにより問題が解決する場合があります。
追伸クラス名ios
/ios11
〜<html>
などを検出して記述するスクリプトが必要ですが、この投稿では説明しません。そのための多くの解決策があります。
これを試してみてください
//HTML
<head>
<style>
.ios-11-body-fixed {
position: fixed;
width: 100%;
}
</style>
</head>
//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
$('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
$('body').removeClass('ios-11-body-fixed');
});