iOS Chrome/Safari - Cuộn không mong muốn khi tập trung đầu vào bên trong phương thức

Question

Đã thử nghiệm trong Safari và Chrome - kết quả tương tự, vì vậy tôi nghĩ rằng đó là sự cố iOS.

Điều này chỉ xảy ra nếu có đầu vào bên trong phương thức và tôi nhấn vào đầu vào đó. Trong cùng một thời điểm, đầu vào đó sẽ được lấy nét và bàn phím iOS gốc sẽ hiển thị.

Trang bên dưới phương thức trong cùng một thời điểm được tự động cuộn đến 50% chiều cao của nó. Hành vi này là hoàn toàn không mong muốn và tôi không có đầu mối làm thế nào để ngăn chặn này mặc định iOS "tính năng".

Demo:

---

CẬP NHẬT: sửa chữa cam kết: limonte/sweetalert2/commit/4a2d36b

Answer 1

Chúng tôi đang đối mặt với một vấn đề tương tự tại nơi làm việc, và tôi tình cờ gặp câu hỏi này với trang demo (xuất sắc) của bạn.

Như bạn đã đề cập, độ lệch luôn là ~ 50% chiều cao của trang, điều này xảy ra bất kể vị trí ban đầu của bạn là offset.

Trong quá khứ, khi tôi quan sát thấy một "nhảy" tương tự với các phiên bản iOS trước đó (mặc dù, ít nhiều ấn tượng nhảy), tôi đã thường làm việc này bằng cách áp dụng position: fixed (hoặc relative) đến body (this allows overflow: hidden to properly work).

Tuy nhiên, điều này có hậu quả không giám sát của việc nhảy người dùng trở lại đầu trang, nếu họ đã cuộn xuống.

Vì vậy, nếu bạn đang mở để giải quyết vấn đề này với một số JavaScript, đây là một sửa chữa/hack Tôi đã ném với nhau:

// Tapping into swal events 
onOpen: function() { 
    var offset = document.body.scrollTop; 
    document.body.style.top = (offset * -1) + 'px'; 
    document.body.classList.add('modal--opened'); 
}, 
onClose: function() { 
    var offset = parseInt(document.body.style.top, 10); 
    document.body.classList.remove('modal--opened'); 
    document.body.scrollTop = (offset * -1); 
} 

Và những gì CSS trông giống như:

.modal--opened { 
    position: fixed; 
    left: 0; 
    right: 0; 
} 

Đây là một nhánh của trang demo của bạn, để minh họa: https://jpattishall.github.io/sweetalert2/ios-bug.html

Và đối với những người đang tìm kiếm bản sửa lỗi chung hơn, bạn có thể làm điều gì đó giống như sau hen mở/đóng một phương thức:

function toggleModal() { 
    var offset; 
    if (document.body.classList.contains('modal--opened')) { 
     offset = parseInt(document.body.style.top, 10); 
     document.body.classList.remove('modal--opened'); 
     document.body.scrollTop = (offset * -1); 
    } else { 
     offset = document.body.scrollTop; 
     document.body.style.top = (offset * -1) + 'px'; 
     document.body.classList.add('modal--opened'); 
    } 
} 

Chỉnh sửa: Một điều cần lưu ý là chúng tôi không áp dụng sửa lỗi cho tất cả thiết bị/nền tảng một cách mù quáng, chỉ cần iOS Safari. Tôi nhận thấy trong câu hỏi khác của bạn rằng bạn không phải là một fan hâm mộ của tràn: ẩn do sự dịch chuyển của trang khi thanh cuộn xuất hiện/biến mất (mà tôi hoàn toàn đồng ý với). Tôi sẽ đề nghị chỉ áp dụng các thiết bị JS cho iOS.

Answer 2

Trên iOS Tôi đã gặp rắc rối với các sự kiện cuộn do setTimeout và setInterval (vị trí phương thức gây di chuyển ?). Tôi tìm thấy một giải pháp ở đâu đó với mã sau đây.

Function.prototype.bind = function(parent) { 
    var f = this; 
    var args = []; 

    for (var a = 1; a < arguments.length; a++) { 
    args[args.length] = arguments[a]; 
    } 

    var temp = function() { 
    return f.apply(parent, args); 
    } 

    return(temp); 
} 


setTimeout(function() { 
    // your animation stuff here 
}.bind(this), 100); 

Answer 3

Một điều tôi có thể nghĩ ở đây là có thể thêm thư viện Fast Click vào mã của bạn. Một số sự cố về thời gian chờ của iOS và Android như độ trễ 300ms được xử lý bằng Nhấp nhanh. Đó là giá trị một shot