[html] iOS 11 Safari 부트 스트랩 모달 텍스트 영역이 커서 외부에 있음

Program / 글쓴이

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>

스 니펫 확장