web-dev-qa-db-ja.com

修正されたモーダルバグでiOS 11入力要素を修正する方法

新しくリリースされたiOS 11のHTML入力のバグにより、固定コンテナに入力要素があるWebサイトで問題が発生しています。正確に何が起こっているのか、いくつかの考えられる回避策があります。

固定コンテナ内にあり、それがブラウザのスクロールのためにキーボードのスペースを作るために画面の下部に十分近い場合、カーソルはテキスト入力の外側に置かれます。コア機能の1つは、固定されたモーダルダイアログを介したユーザー入力に依存しているため、これは私たちにとって重大な問題でした。

コア機能の1つは、固定されたモーダルダイアログを介したユーザー入力に依存しているため、これは私たちにとって重大な問題でした。

enter image description here

jquerycssinputmodal-dialogios11
15
Amjad Jafar

今のところno完全な修正があります。 2つの一時的なオプション：

  1. ダイアログ/モーダルをposition: absoluteに変更（推奨されません）
  2. モーダル/ダイアログが開いたときに背景のスクロールを削除し、ダイアログを閉じたときにそれを復元してください。

オプション2の詳細：たとえば、ダイアログが開いたときにルートdiv（またはスクロールバーを持つもの）をoverflowY='hidden'に設定し、ダイアログが閉じたときに元のoverflowY=''に戻すことができます。 （欠点：ダイアログ/モーダルを開くと、ブラウザが上部にスクロールされます）

注意：

  1. トリガーの修正時にOS /ブラウザを検出することを忘れないでください。そうしないと、IEで問題が発生する可能性があります。
  2. このスレッド に従って、この問題に関する最新のアップデートを入手してください。
6
Ming

この解決策は、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とキャッシュプラグインを使用している場合、すべてのキャッシュを空にする必要があります。

これがお役に立てば幸いです。

4
Sajjad Ahmad

これがあなたが直面している問題とまったく同じかどうかはわかりませんが、この解決策はうまくいきました：

.modal-open {position：fixed;}

iOS 11 Safari bootstrapカーソルの外側のモーダルテキスト領域

2
John Nimis

このバグはiframe入力にも影響するので、見つけた修正はモーダルにも役立つと思います。

行う必要があるのは、iframe内の入力に次のCSSを適用することだけです。

input:hover {
   cursor: text
}

以下に例を示します。 https://codepen.io/ryanoutloud/project/full/AEKGjj

0
Ryan L.

このソリューションは、IOS11の入力の問題を修正するのに役立ちました。 https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

また、モーダル内でスクロールしようとすると、迷惑な背景スクロールが修正されます:)

要約：ページのトップへの移動を防ぐために、ポップアップを閉じた後、position：fixedをbody、cache window.pageYOffsetに追加し、キャッシュされた位置にスクロールします。

0
Мария Хаак

私は同じ問題を抱えていたので、私の答えを見てみましょう、多分それはあなたを助けるでしょう： https://stackoverflow.com/a/46954486/8775824

0
Dan

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>などを検出して記述するスクリプトが必要ですが、この投稿では説明しません。そのための多くの解決策があります。

0
JoakimB

これを試してみてください

//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');
});
0
Dharmesh Rakholia