iOS Safari/Chrome - 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ĩ đó 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 mà đầu vào đã tập trung và bàn phím iOS gốc trở nên 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:

Answer 1

Chỉ cần thêm một câu trả lời ở đây trong trường hợp người vấp ngã khi câu hỏi này (rather than your other question, which has a great demo to illustrate this issue)

Chúng tôi đang phải đối mặt với một vấn đề tương tự tại nơi làm việc. 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à bao nhiêu.

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 (which 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 ngã ba của trang demo của bạn (từ câu hỏi khác 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 một sửa chữa chung hơn, bạn có thể làm som ething như sau khi 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'); 
    } 
} 

Edit: Để tránh "chuyển/unshifting" trên máy tính để bàn, tôi sẽ đề nghị phát hiện tính năng/ua sniffing để áp dụng điều này để chỉ săn di động.

Answer 2

Tôi không chắc chắn 100%, nhưng tôi có thể tưởng tượng như sau:

Khi bàn phím xuất hiện, chiều cao cửa sổ giảm, nhưng giá trị scrollTop vẫn là tương tự, vì vậy trang web nhảy đến giá trị đó. Bạn có thể thêm overflow:hidden vào body khi phương thức mở. Điều này sẽ chặn việc di chuyển "phía sau" phương thức và có thể giải quyết vấn đề của bạn.

Answer 3

Tôi cũng đã gặp sự cố này. Một giải thích ngắn gọn là iOS Safari sẽ cố gắng tự động cuộn đến bất kỳ đầu vào nào được tập trung vào và trong trường hợp cụ thể này phần tử được tập trung nằm trong một phần tử định vị cố định. Safari dường như đấu tranh với việc tìm kiếm các yếu tố vị trí cố định khi nó muốn trung tâm các yếu tố trên màn hình do đó di chuyển nền.

Có thể khắc phục sự cố là thêm touchstart trình xử lý sự kiện vào trường nhập và tính vị trí hiện tại của lớp phủ, thay đổi vị trí thành tuyệt đối và cập nhật vị trí trên cùng/bên trái để đặt lớp phủ trở lại vị trí trên màn hình khi cố định vị trí, và cuối cùng thêm một mới blur nghe để đặt lại lớp phủ trở lại vị trí cố định khi rời khỏi tiêu điểm/làm mờ trên đầu vào. Điều này sẽ ngăn trang di chuyển. Tôi khuyên bạn nên sử dụng touchstart vì nó sẽ kích hoạt trước sự kiện focus trong trường hợp trang này sẽ bắt đầu cuộn. Safari sẽ có thể tìm và căn giữa lớp phủ vị trí tuyệt đối khi sự kiện focus được kích hoạt.

Answer 4

Vì vậy, tôi đã giải quyết vấn đề này và thử nghiệm trên Iphone 5 của mình, không có Ipad để kiểm tra. Tôi đã vô hiệu hóa overflow:hidden trong giải pháp của mình, bạn có thể thêm, Nếu bạn muốn tắt cuộn tất cả trong một cho tất cả các phương thức. Giải pháp là thêm thuộc tính chiều cao và vị trí cơ bản cho cả phần tử html và phần tử cơ thể.

html, body { 
    position:relative; 
    /*overflow:hidden;*/ 
    height: 100%; 
} 

Vì vậy, chỉ khi bạn tập trung vào đầu vào, chiều cao và vị trí sẽ được xác định, tôi đã mã hóa giải pháp này từ repo, tôi sẽ gửi yêu cầu kéo. Tôi cũng đã thêm trình duyệtSync trong thiết lập gulp của bạn. Vì vậy, bây giờ nó sẽ được dễ dàng để kiểm tra trên bất kỳ thiết bị.

Chúc mừng!

EDIT: một cách khác, nếu giải pháp trên không hoạt động vì một lý do nào đó. sau đó,

/* 
    * @summary touch handler; will remove touch ability 
    * @author yeomann 
    */ 
    function Touchyhandler(e) { 
    e.preventDefault(); 
    } 

và sau đó thực dụng thêm và loại bỏ người nghe cảm ứng như thế này

//to add 
document.addEventListener('touchmove', Touchyhandler, false); 
//to remove 
document.removeEventListener('touchmove', Touchyhandler); 

trên js giải pháp thử nghiệm trên IOS 9.3.2 làm việc như sự quyến rũ đối với tôi]

Answer 5

Để ngăn trang di chuyển, trong cả trục x và trục y, chúng tôi sử dụng thuộc tính overflow: hidden; trong css.

Vì vậy, nếu chúng ta áp dụng điều này cho cơ thể,

body { 
    overflow: hidden !important; 
} 

Nó sẽ làm việc đúng không?

Thực tế, điều này thực sự không hiệu quả, bởi vì bạn vừa tắt tính năng cuộn x và y cho toàn bộ trang trong toàn bộ thời gian.

Để bỏ qua điều này, chúng tôi có thể sử dụng một chút javascript để thêm lớp vào nội dung khi phương thức hoạt động.

Trước tiên, chúng tôi phải thêm id vào cơ thể của chúng tôi, <body id="body"> điều này cho phép javascript nhận dạng nội dung.

Thứ hai, chúng tôi phải thêm id vào phương thức, <div id="modal">, cũng cho phép javascript nhận dạng phương thức.

<script type="text/javascript"> 
    function modalActive() { 
     if (document.getElementById("modal").classList.contains("active")) { 
      document.getElementById("body").classList.add("modal-active"); 
     } else { 
      getElementById("modal").classList.remove("active")); 
      getElementById("body").classList.remove("modal-active"));   
     } 
    } 
</script> 

cho cả các nút mà ra mắt, và đóng phương thức, chúng ta phải thêm một sự kiện onclick,

<button onclick="modalActive()">Click Me!</button>

Ngày đầu đó chúng ta phải thêm video này vào file css.

body { 
    overflow: initial !important; 
} 

body.modal-active { 
    overflow: hidden !important; 
} 

Và ở đó chúng tôi đi.

Answer 6

Tôi đã thử nhiều thứ hoạt động cho các đầu vào phương thức nảy trên trang html. Giải pháp đơn giản nhất làm việc cho tôi là thêm các kiểu sau vào thẻ cơ thể khi phương thức được mở trên trang.

position: fixed; 
width: 100%;