iOS 11 Safari 부트 스트랩 모달 텍스트 영역이 커서 외부에 있음 못했습니다. 보시다시피

iOS 11 safari에서는 입력 텍스트 상자 커서가 입력 텍스트 상자 밖에 있습니다. 왜이 문제가 발생하는지 이해하지 못했습니다. 보시다시피 내 집중된 텍스트 상자는 이메일 텍스트 입력이지만 커서는 그 밖에 있습니다. 이것은 iOS 11 Safari에서만 발생합니다.

문제

답변

position:fixed모달을 열 때 본체 에 추가하여 문제를 해결했습니다 . 이것이 당신을 도울 수 있기를 바랍니다.

답변

개인적 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>

참고 사항
javascript 함수가 이제 자체 호출됩니다.

** iOS 11.3 업데이트-버그 수정 ?? **

iOS 11.3부터 ​​버그가 수정되었습니다. 테스트 할 필요가 없습니다 OS 11_.iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

하지만 iOS 11.2가 여전히 널리 사용되고 있으므로주의하세요 (2018 년 4 월 현재). 보다

합계 1

스탯 2

답변

이 문제는 부트 스트랩과 사파리를 넘어 섭니다. 모든 브라우저에서 발생하는 iOS 11의 전체 표시 버그입니다. 위의 수정으로 모든 경우에이 문제가 수정되는 것은 아닙니다.

버그는 여기에 자세히보고됩니다.

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

아마도 그들은 이미 버그로 Apple 에보 고했습니다.

답변

실망스러운 버그입니다. 확인해 주셔서 감사합니다. 그렇지 않으면 아이폰이나 머리를 벽에 부딪 히게됩니다.

가장 간단한 수정은 다음과 같습니다 (코드 한 줄 변경).

다음 CSS를 html 또는 외부 CSS 파일에 추가하기 만하면됩니다.

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

다음은 전체 작동 예입니다.

.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>
스 니펫 확장

여기에 문제를 제출했습니다 :
https://github.com/twbs/bootstrap/issues/24059

답변

가장 쉽고 깨끗한 솔루션 :

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

답변

이 문제는 Apple 장치를 iOS 11.3으로 업데이트 한 후 더 이상 재현 할 수 없습니다.

답변

모달이 열려있을 때 추가 position: fixed;합니다 body.

$(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>
스 니펫 확장