web-dev-qa-db-ja.com

ポップアップフォームでIOS11 Safariにカーソルを正しく配置するにはどうすればよいですか？

IPhoneをIOS11にアップグレードした後、ログインウィンドウのランダムな位置にカーソルが表示されるようになりました。これはChrome/IOS11でも発生します。下のスクリーンショットでは、カーソルの位置が赤でマークされています。

Login screen with misplaced cursor

Another screen with the same problem

iosiphonegoogle-chromemobile-safariios11
10
mkvakin

ページの本文にposition: fixedを追加してみてください。

8
Ignacio Ferro

イベンツの答えをピギーバック。 bootstrap modalを使用する場合、これをmain.jsファイルに追加できます。

 var savedScrollPosition;

 $(document).on('show.bs.modal', '.modal', function() {
     savedScrollPosition = $(window).scrollTop();
 });

 $(document).on('hidden.bs.modal', '.modal', function() {
     window.scrollTo(0, savedScrollPosition);
 });

そして、これはあなたのCSSにあります。なぜなら、モーダルがポップするときはいつでも、モーダルオープンクラスがすでに追加されているからです：

body.modal-open {
     position: fixed;
     width: 100%;
}

助けてくれてありがとうybentz !!私はあなたのコメントに応じたでしょうが、私はまだそうする評判がありません。

4
Geoff

個人的には、position: fixed自動的に上にスクロールします。かなり迷惑です！

他のデバイスやバージョンへのペナルティを回避するためにこの修正は、iOSの適切なバージョンにのみ適用します。

**バージョン1-すべてのモーダルが修正されました**

javascript/jQueryの場合

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

CSSの場合

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

**バージョン2-選択されたモーダルのみ**

関数を変更して、クラス.inputModal

上部へのスクロールを回避するために、入力のあるモーダルのみが影響を受けます。

javascript/jQueryの場合

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

CSSの場合

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

HTMLの場合クラスinputModalをモーダルに追加します

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>

Nota benejavascript関数が自己起動するようになりました

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

0
Aasim Goriya

私は同じ問題を抱えていましたが、bodyのposition: fixedソリューションはそれを解決するので、すばらしいことです。ただし、クラスをbodyに追加すると、ブラウザがページの上部に「ジャンプ」するため、ポップアップ/モーダルが閉じているときに削除すると、ユーザーが混乱する可能性があることに注意してください。 。

ポップアップ/モーダルがiOSで全画面の場合、修正するには、スクロール位置を保存してからposition: fixedクラスを次のように追加します（jQueryを使用しますが Vanilla js ）：

var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')

そして、次のようにポップアップで復元します：

$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)

そしてあなたのCSSは

body.has-fullscreen-modal {
  position: fixed;
}

お役に立てば幸いです。

0
ybentz

Ignacios Answerが問題を解決しました。オーバーレイヤー/モーダルを表示する場合、ボディに固定されたクラスを追加します。また、このルールをcssに追加します。

body.fixed{
  position: fixed;
}
0
harley81