Modaler Textbereich für iOS 11 Safari Bootstrap außerhalb des Cursors

Question 1

Bei der Safari mit iOS 11 befindet sich der Eingabe-Textfeld-Cursor außerhalb des Eingabe-Textfelds. Wir haben nicht verstanden, warum es dieses Problem gibt. Wie Sie sehen können, ist mein fokussiertes Textfeld eine E-Mail-Texteingabe, aber mein Cursor befindet sich außerhalb davon. Dies geschieht nur mit iOS 11 Safari

Question 2

Ich habe das Problem behoben, indem ich position:fixedden Körper beim Öffnen eines Modals erweitert habe. Hoffe das wird dir helfen.

Question 3

Scrollen Sie persönlich position: fixed automatisch nach oben . Ziemlich nervig !

Um andere Geräte und Versionen nicht zu bestrafen, wende ich diesen Fix nur auf die entsprechenden Versionen von iOS an.

VERSION 1 - Alle Modalitäten behoben

Für das 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");

    }

});

Für das CSS

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

VERSION 2 - Nur ausgewählte Modalitäten

Ich habe die Funktion so geändert, dass sie nur für ausgewählte Modalitäten mit einer Klasse ausgelöst wird .inputModal

Nur die Modalitäten mit Eingängen sollten beeinflusst werden, um ein Scrollen nach oben zu vermeiden.

Für das 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);
                }
            });

        }
    })();
});

Für das CSS

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

Für den HTML- Code Fügen Sie die Klasse inputModal zum Modal hinzu

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

Nota bene Die Javascript-Funktion ruft jetzt selbst auf

UPDATE iOS 11.3 - Fehler behoben 😃🎉

Ab iOS 11.3 wurde der Fehler behoben. Es besteht keine Notwendigkeit, auf OS 11_in zu testeniOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

Seien Sie jedoch vorsichtig, da iOS 11.2 immer noch weit verbreitet ist (Stand April 2018). Sehen

stat 1

stat 2

Question 4

Dieses Problem geht über Bootstrap und nur über Safari hinaus. Es ist ein vollständiger Anzeigefehler in iOS 11, der in allen Browsern auftritt. Das obige Update behebt dieses Problem nicht in allen Fällen.

Der Fehler wird hier ausführlich gemeldet:

https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Angeblich haben sie es Apple bereits als Fehler gemeldet.

Question 5

Frustrierender Fehler, danke, dass Sie ihn identifiziert haben. Andernfalls würde ich mein iPhone oder meinen Kopf gegen die Wand schlagen.

Die einfachste Lösung ist (1 Zeile Codeänderung):

Fügen Sie einfach das folgende CSS zum HTML-Code oder zu einer externen CSS-Datei hinzu.

<style type="text/css">
.modal-open { position: fixed; }
</style>

Hier ist ein voll funktionsfähiges Beispiel:

.modal-open { position: fixed; }

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

Erweitern Sie das Snippet

Ich habe hier ein Problem eingereicht: https://github.com/twbs/bootstrap/issues/24059

Question 6

Einfachste / sauberste Lösung:

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

Question 7

Dieses Problem ist nach dem Update Ihrer Apple-Geräte auf iOS 11.3 nicht mehr reproduzierbar

Question 8

Hinzufügen position: fixed;, bodywenn Modal geöffnet ist.

$(document).ready(function($){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
    $("#myModal").on('show.bs.modal', function () {
        $('body').addClass('body-fixed');
    });
    $("#myModal").on('hide.bs.modal', function () {
        $('body').removeClass('body-fixed');
    });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Form</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="control-label">Input #1</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #2</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #3</label>
					<input type="text" class="form-control">
				</div>
				<div class="form-group">
					<label class="control-label">Input #4</label>
					<input type="text" class="form-control">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

Erweitern Sie das Snippet

Question 9

Diese Lösungen, die eine position: fixedPositionskorrektur basierend auf der scrollTopArbeit verwenden, funktionieren sehr gut, aber einige Leute (einschließlich ich) haben ein anderes Problem: Tastatur-Caret / Cursor werden nicht angezeigt, wenn die Eingaben fokussiert sind.

Ich beobachtete , dass caret / Cursor funktioniert nur , wenn wir NICHT DO verwenden position: fixedauf Körper. So , nachdem einige Dinge versuchen, gab ich auf mit diesem Ansatz und zur Verwendung entschieden position: relativeauf bodyund die Nutzung , scrollTopum eine korrekte modalen Spitzenposition statt.

Siehe Code unten:

var iosScrollPosition = 0;

function isIOS() {
   // use any implementation to return true if device is iOS
}

function initModalFixIOS() {
    if (isIOS()) {
        // Bootstrap's fade animation does not work with this approach
        // iOS users won't benefit from animation but everything else should work
        jQuery('#myModal').removeClass('fade');
    }
}

function onShowModalFixIOS() {
    if (isIOS()) {
        iosScrollPosition = jQuery(window).scrollTop();
        jQuery('body').css({
            'position': 'relative', // body is now relative
            'top': 0
        });
        jQuery('#myModal').css({
            'position': 'absolute', // modal is now absolute
            'height': '100%',
            'top': iosScrollPosition // modal position correction
        });
        jQuery('html, body').css('overflow', 'hidden'); // prevent page scroll
    }
}

function onHideModalFixIOS() {
    // Restore everything
    if (isIOS()) {
        jQuery('body').css({
            'position': '',
            'top': ''
        });
        jQuery('html, body').scrollTop(iosScrollPosition);
        jQuery('html, body').css('overflow', '');
    }
}

jQuery(document).ready(function() {
    initModalFixIOS();
    jQuery('#myModal')
        .on('show.bs.modal', onShowModalFixIOS)
        .on('hide.bs.modal', onHideModalFixIOS);
});

Question 10

Wie bereits erwähnt: die Einstellung style.position propertyvon bodybis fixedlöst das iOS cursor misplacementProblem.

Dieser Gewinn geht jedoch zu Lasten eines gewaltsamen Bildlaufs zum oberen Rand der Seite.

Glücklicherweise kann dieses neue UXProblem ohne großen Aufwand durch die Nutzung von HTMLElement.styleund behoben werden window.scrollTo().

Das Wesentliche ist, dem entgegenzuwirken, scroll to topindem man das Wann des bodyElements manipuliert . Dies erfolgt anhand des von der Variablen erfassten Werts .style.topmountingYOffsetygap

Von dort ist es nur darum , die zum Zurücksetzen body's style.topauf 0und Reframing der Sicht des Benutzers verwenden , window.scrollTo(0, ygap)wenn dismounting.

Unten finden Sie ein praktisches Beispiel.

// Global Variables (Manage Globally In Scope).
const body = document.querySelector('body') // Body.
let ygap = 0 // Y Offset.


// On Mount (Call When Mounting).
const onModalMount = () => {

  // Y Gap.
  ygap = window.pageYOffset || document.documentElement.scrollTop

  // Fix Body.
  body.style.position = 'fixed'

  // Apply Y Offset To Body Top.
  body.style.top = `${-ygap}px`

}


// On Dismount (Call When Dismounting).
const onModalDismount = () => {

  // Unfix Body.
  body.style.position = 'relative'

  // Reset Top Offset.
  body.style.top = '0'

  // Reset Scroll.
  window.scrollTo(0, ygap)

}

Question 11

Falls jemand nach einem Fix in Vanilla JS sucht, der unter IOS> 11.2 funktioniert und kein zusätzliches CSS erfordert:

(function() {
    if (!/(iPhone|iPad|iPod).*(OS 11_[0-2]_[0-5])/.test(navigator.userAgent)) return

    document.addEventListener('focusin', function(e) {
        if (!e.target.tagName == 'INPUT' && !e.target.tagName != 'TEXTAREA') return
        var container = getFixedContainer(e.target)
        if (!container) return
        var org_styles = {};
        ['position', 'top', 'height'].forEach(function(key) {
            org_styles[key] = container.style[key]
        })
        toAbsolute(container)
        e.target.addEventListener('blur', function(v) {
            restoreStyles(container, org_styles)
            v.target.removeEventListener(v.type, arguments.callee)
        })
    })

    function toAbsolute(modal) {
        var rect = modal.getBoundingClientRect()
        modal.style.position = 'absolute'
        modal.style.top = (document.body.scrollTop + rect.y) + 'px'
        modal.style.height = (rect.height) + 'px'
    }

    function restoreStyles(modal, styles) {
        for (var key in styles) {
            modal.style[key] = styles[key]
        }
    }

    function getFixedContainer(elem) {
        for (; elem && elem !== document; elem = elem.parentNode) {
            if (window.getComputedStyle(elem).getPropertyValue('position') === 'fixed') return elem
        }
        return null
    }
})()

Was dies tut ist:

Überprüfen Sie, ob der Browser Safari unter iOS 11.0.0 - 11.2.5 ist
Achten Sie auf focusinEreignisse auf der Seite
Wenn das fokussierte Element ein inputoder ein Element ist textareaund in einem Element mit fixedPosition enthalten ist, ändern Sie die Position des Containers in absoluteBezug auf scrollTopdie ursprünglichen Abmessungen des Containers.
Stellen Sie bei Unschärfe die Position des Containers wieder her fixed.

Question 12

Diese Lösung hat bei mir funktioniert und funktioniert in allen Browsern unter iOS.

.safari-nav-force{
/* Allows content to fill the viewport and go beyond the bottom */
height: 100%;
overflow-y: scroll;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
}

JavsScript

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
$('.modal').on('shown.bs.modal', function () {
    if (iOS && $('.modal').hasClass('in')){
        $('html,body').addClass('safari-nav-force');
    }
});
$('.modal').on('hidden.bs.modal', function () {
    if (iOS && !$('.modal').hasClass('in')){
        $('html,body').removeClass('safari-nav-force');
    }
});

Question 13

Haben Sie versucht, viewport-fit = cover für das Meta-Viewport.

Schauen Sie sich das an: https://ayogo.com/blog/ios11-viewport/

Question 14

Überschreiben Sie modales CSS und ändern Sie es positionvon fixednachabsolute

.modal {
position: absolute !important;
}

Question 15

zur # modal Position hinzufügen: absolut behebt zukünftige Probleme im Zusammenhang mit der Position: behoben

Modaler Textbereich für iOS 11 Safari Bootstrap außerhalb des Cursors

** VERSION 1 - Alle Modalitäten behoben **

** VERSION 2 - Nur ausgewählte Modalitäten **

** UPDATE iOS 11.3 - Fehler behoben 😃🎉 **

VERSION 1 - Alle Modalitäten behoben

VERSION 2 - Nur ausgewählte Modalitäten

UPDATE iOS 11.3 - Fehler behoben 😃🎉