Vùng văn bản phương thức bootstrap của Safari iOS 11 bên ngoài con trỏ

Question 1

Với iOS 11 safari, con trỏ hộp văn bản đầu vào nằm ngoài hộp văn bản đầu vào. Chúng tôi không hiểu tại sao nó lại gặp sự cố này. Như bạn có thể thấy hộp văn bản tập trung của tôi là kiểu nhập văn bản email nhưng con trỏ của tôi ở bên ngoài nó. Điều này chỉ xảy ra với iOS 11 Safari

Question 2

Tôi đã khắc phục sự cố bằng cách thêm position:fixedvào nội dung khi mở một phương thức. Hy vọng điều này sẽ giúp bạn.

Question 3

Cá nhân, position: fixed tự động cuộn lên đầu trang . Khá khó chịu !

Để tránh phạt các thiết bị và phiên bản khác, tôi chỉ áp dụng bản sửa lỗi này cho các phiên bản iOS thích hợp.

PHIÊN BẢN 1 - Đã sửa tất cả các chế độ

Đối với 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");

    }

});

Đối với CSS

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

PHIÊN BẢN 2 - Chỉ các phương thức đã chọn

Tôi đã sửa đổi chức năng để chỉ kích hoạt cho các phương thức đã chọn với một lớp .inputModal

Chỉ các phương thức có đầu vào mới được tác động để tránh cuộn lên đầu.

Đối với 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);
                }
            });

        }
    })();
});

Đối với CSS

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

Đối với HTML Thêm class inputModal vào phương thức

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

Nota Bene Chức năng javascript hiện đang tự gọi

CẬP NHẬT iOS 11.3 - Đã sửa lỗi 😃🎉

Kể từ iOS 11.3, lỗi đã được sửa chữa. Không cần phải kiểm tra OS 11_trongiOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

Nhưng hãy cẩn thận vì iOS 11.2 vẫn được sử dụng rộng rãi (tính đến tháng 4 năm 2018). Xem

stat 1

stat 2

Question 4

Vấn đề này vượt ra ngoài Bootstrap và ngoài Safari. Đây là một lỗi hiển thị đầy đủ trong iOS 11 xảy ra trên tất cả các trình duyệt. Bản sửa lỗi ở trên không khắc phục được sự cố này trong mọi trường hợp.

Lỗi được báo cáo chi tiết tại đây:

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

Được cho là họ đã báo cáo lỗi cho Apple.

Question 5

Lỗi đáng thất vọng, cảm ơn bạn đã xác định nó. Nếu không, tôi sẽ đập chiếc iphone của mình hoặc đầu vào tường.

Cách khắc phục đơn giản nhất là (1 dòng thay đổi mã):

Chỉ cần thêm CSS sau vào html hoặc vào tệp css bên ngoài.

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

Đây là một ví dụ hoạt động đầy đủ:

.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>

Mở rộng đoạn mã

Tôi đã gửi sự cố ở đây: https://github.com/twbs/bootstrap/issues/24059

Question 6

Giải pháp dễ nhất / sạch nhất:

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

Question 7

Sự cố này không còn tái tạo sau khi cập nhật thiết bị apple của bạn lên iOS 11.3

Question 8

Thêm position: fixed;vào bodykhi phương thức đang mở.

$(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>

Mở rộng đoạn mã

Question 9

Những giải pháp sử dụng position: fixedvà sửa vị trí dựa trên scrollTophoạt động thực sự tốt, nhưng một số người (bao gồm cả tôi) gặp phải vấn đề khác: dấu mũ bàn phím / con trỏ không hiển thị khi đầu vào được lấy nét.

Tôi quan sát thấy rằng dấu mũ / con trỏ chỉ hoạt động khi chúng tôi KHÔNG sử dụng position: fixedtrên cơ thể. Vì vậy, sau khi thử một vài điều, tôi đã từ bỏ việc sử dụng phương pháp này và quyết định sử dụng position: relativetrên bodyvà sử dụng scrollTopđể đúng vị trí hàng đầu phương thức của thay thế.

Xem mã bên dưới:

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

Như đã đề cập trước đây: thiết lập style.position propertycủa bodyđể fixedgiải quyết iOS cursor misplacementvấn đề.

Tuy nhiên, lợi nhuận này đi kèm với cái giá phải trả là bị buộc phải cuộn lên đầu trang.

May mắn thay, UXvấn đề mới này có thể được phủ nhận mà không tốn kém nhiều chi phí bằng cách tận dụng HTMLElement.stylevà window.scrollTo().

Ý chính cơ bản là chống lại scroll to topbằng cách thao tác khi bodycủa phần tử . Điều này được thực hiện bằng cách sử dụng giá trị được bắt bởi biến.style.topmountingYOffsetygap

Từ đó nó chỉ đơn giản là vấn đề thiết lập lại body's style.topđể 0và sắp xếp lại quan điểm của người sử dụng sử dụng window.scrollTo(0, ygap)khi dismounting.

Xem bên dưới để biết một ví dụ thực tế.

// 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

Trong trường hợp bất kỳ ai đang tìm kiếm bản sửa lỗi trong vanilla js hoạt động trên IOS> 11.2 và không yêu cầu bất kỳ CSS bổ sung nào:

(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
    }
})()

Điều này làm là:

Kiểm tra xem trình duyệt có phải là Safari trên iOS 11.0.0 - 11.2.5 hay không
Nghe bất kỳ focusinsự kiện nào trên trang
Nếu phần tử tập trung là một inputhoặc một textareavà được chứa trong một phần tử cófixed vị trí, hãy thay đổi vị trí vùng chứa thành absolutetrong khi liên quan đến scrollTopvà các kích thước ban đầu của vùng chứa.
Khi làm mờ, hãy khôi phục vị trí của vùng chứa thành fixed.

Question 12

Giải pháp này phù hợp với tôi và nó hoạt động tốt trên tất cả các trình duyệt trên 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

Bạn đã thử viewport-fit = cover cho meta viewport chưa.

Nhìn vào đây: https://ayogo.com/blog/ios11-viewport/

Question 14

Ghi đè css phương thức và thay đổi nó positiontừ fixedthànhabsolute

.modal {
position: absolute !important;
}

Question 15

thêm vào vị trí #modal: tuyệt đối nó khắc phục các sự cố trong tương lai liên quan đến vị trí: fixed

Vùng văn bản phương thức bootstrap của Safari iOS 11 bên ngoài con trỏ

** PHIÊN BẢN 1 - Đã sửa tất cả các chế độ **

** PHIÊN BẢN 2 - Chỉ các phương thức đã chọn **

** CẬP NHẬT iOS 11.3 - Đã sửa lỗi 😃🎉 **

PHIÊN BẢN 1 - Đã sửa tất cả các chế độ

PHIÊN BẢN 2 - Chỉ các phương thức đã chọn

CẬP NHẬT iOS 11.3 - Đã sửa lỗi 😃🎉