Bootstrap 3 phương thức biến mất trên iPad Safari chỉ sau khi chọn tùy chọn từ menu chọn

Question

Tôi có chức năng đăng ký trong ứng dụng web đưa người dùng qua quy trình gồm bốn bước để thêm thông tin vào trang web. Khi người dùng nhấp vào nút 'Thêm', một phương thức Bootstrap xuất hiện và người dùng bắt đầu ở bướC# 1.

Mỗi bước có một menu tùy chọn để người dùng chọn và dữ liệu được điền trong mỗi bước phụ thuộc vào các lựa chọn của các bước trước đó. Người dùng có thể để trống một bước và tiếp tục, nhưng sau đó họ không có lựa chọn nào để thực hiện cho phần còn lại của quy trình. Chức năng này hoạt động như mong đợi trong mọi trình duyệt trên máy tính để bàn và thiết bị di động ngoại trừ Safari trên iPad.

Trong Safari, người dùng sẽ mở phương thức, chọn dữ liệu ở bước 1 và chuyển sang bước 2. Nếu người dùng không chọn bất kỳ thứ gì trong trình đơn thả xuống này, họ có thể tiếp tục bước 3. Tuy nhiên, nếu họ thực hiện lựa chọn ở bước 2, phương thức biến mất và người dùng không thể tiếp tục. Điều này chỉ xảy ra trong Safari cho iPad/iPhone.

Tôi đã thử thiết lập trình kiểm tra web trên iPad và tải bảng điều khiển trên máy Mac, nhưng không có lỗi hoặc các thông báo sử dụng khác trong bảng điều khiển. Tôi đang cố gắng tìm ra nếu đây là một lỗi trong Safari, hoặc nếu Safari xử lý đầu vào phương thức từ một thẻ lựa chọn khác với các trình duyệt khác.

Answer 1

Bạn bè của nhà phát triển có giao diện. Ông nói thêm chức năng này:

jQuery.usingSafari = function(allowDevices){ 
allowDevices = allowDevices != undefined ? allowDevices : true; 
if(!allowDevices){ 
    return /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) 
     && navigator.userAgent.indexOf('Chrome') == -1 
     && navigator.userAgent.indexOf('iPhone') == -1 
     && navigator.userAgent.indexOf('iPad') == -1 
     && navigator.userAgent.indexOf('iPod') == -1; 
} else{ 
    var results = /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) && navigator.userAgent.indexOf('Chrome') == -1; 
    return results; 
} 

}

//Disable backdrop 
if(jQuery.usingSafari(false)) { 
document.write('<style>div.modal-backdrop{ display:none; }</style>'); 

}

Và sau đó gọi phương thức:

jQuery('#player-lightbox').modal({ 
      backdrop: jQuery.usingSafari(true) ? "static" : true, 
      show:true} 
     ); 

này dường như đã cố định vấn đề. Hy vọng điều này sẽ giúp người khác!

Answer 2

Điều này có vẻ là do quá trình chuyển đổi fade. Lần đầu tiên tôi phát hiện thấy ứng dụng có chạy trên iOS hay không, sau đó thực hiện truy vấn cho các yếu tố .modal và loại bỏ fade. Điều này giải quyết vấn đề cả trên iPad/iPhone. Lưu ý: Phông nền phương thức có thể cần thêm một số nỗ lực để làm cho việc chơi trở nên tốt đẹp với bàn phím ảo bật ra và vào.

Để minh họa:

if(isIOS()) 
    $('.modal').removeClass('fade'); 

Edit: iPad (ngang) cũng cần

$('.modal').on('shown.bs.modal', function() { 
    $(this).find('.modal-backdrop').css('position', 'absolute'); 
}); 

Answer 3

Tôi đã có một vấn đề tương tự với một droplist bên trong một container được biến mất sau khi thực hiện một lựa chọn và đây là CHỈ xảy ra trên một thiết bị IPAD thực tế (kiểm tra trong chrome w/thanh công cụ thiết bị với 'IPAD' được chọn làm việc tốt). Điều này có vẻ là một lỗi đã biết như đã đề cập trong phần bình luận ở trên.

Thay đổi css cho vùng chứa thành vị trí: tuyệt đối giải quyết vấn đề cho tôi. Tuy nhiên, nó sẽ phá vỡ bố cục cho các thiết bị khác & chế độ xem.

Việc sửa chữa là để chỉ nhắm mục tiêu iPads với sự cai trị css sửa đổi:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .your-container { 
    position: absolute; 
    } 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .your-container { 
    position: absolute; 
    } 
}