Trang web thường từ chối di chuyển trên iPhone (Safari)

Question

Vì một số lý do, trang web của tôi thường từ chối di chuyển, nhưng chỉ trên iPhone.

Devices/trình duyệt mà làm công việc:

• iPad (Safari)
• điện thoại Android (Chrome)
• PC (Chrome (bao gồm DevTools thi đua) & IE11)

Thiết bị hiển thị lỗi:

• iPhone 4S
• iPhone 5
• iPhone 6

Vì vậy, rõ ràng nó là iPhone liên quan .. Nó giống như có một thời gian chờ trên chỉ di chuyển trên iPhone. Tôi sẽ cố gắng mô tả lỗi càng tốt càng tốt.

Sau khi tải trang web, tôi phải chờ 5 giây trước khi tôi có thể cuộn. Sau đó, tôi di chuyển xuống một chút. Trong khi di chuyển, thanh cuộn có thể được nhìn thấy (như bình thường). Khi thanh cuộn đã bị mờ, việc di chuyển ngược lại hướng sẽ bị chặn trong khoảng 5 giây. Khi tôi cuộn và cuộn theo hướng ngược lại trước khi thanh cuộn biến mất, nó cuộn như mong đợi.

Ngoài ra khi tôi muốn thay đổi hướng cuộn, nó giống như tôi phải vuốt hai lần để "khởi tạo" cuộn. Tôi phải cuộn, chờ, cuộn để thực sự cuộn hướng đó.

Vì vậy:

• Cuộn xuống (cuộn), chờ đợi, cuộn xuống (cuộn) - cuộn cùng một hướng
• Scroll up (cuộn), chờ đợi, di chuyển lên (cuộn) - cuộn cùng hướng
• Scrol l xuống (cuộn), di chuyển lên (cuộn) - thay đổi hướng trước khi cuộn mất dần
• Cuộn xuống (cuộn), chờ đợi, di chuyển lên (gì) - thay đổi hướng
• Cuộn xuống (cuộn), đợi, cuộn lên (không có gì), chờ, cuộn lên (cuộn) - thay đổi hướng, ha đã di chuyển và đợi hai lần

Tại wait, tôi đợi như 3 giây. Nếu tôi không chờ đợi đủ lâu khi di chuyển theo hướng ngược lại, nó sẽ không di chuyển.

Trang web sử dụng MeteorJS và jQuery. Tôi đã thử một số tập lệnh tiện ích di động, như iScroll và FastClick, nhưng dường như chúng không giúp ích gì.

Answer 1

Ok vì vậy tôi đã bắt đầu nhận xét nội dung trong nhiều giờ, chỉ để tìm hiểu rằng thứ đang chặn cuộn là menu.

Tôi có một menu, ẩn trong nền với phong cách sau:

menu { 
    opacity: 0; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    overflow-y: scroll; 
} 

Tôi thực sự nghĩ rằng có một z-index -1 đã làm cho nó không interactable khi công cụ với một z-index cao hơn là trong phía trước của nó, nhưng dường như nó không có trên iPhone (trên Android nó ..).

Thay đổi overflow-y: scroll; thành hidden khi menu không mở (và scroll khi menu đang mở) khắc phục. Ngoài ra, một ý tưởng hay là chỉ ẩn hoàn toàn menu.

Answer 2

Tôi đã gặp phải điều này rất nhiều và đã gỡ lỗi mã Safari. Đã tìm thấy lỗi này: https://bugs.webkit.org/show_bug.cgi?id=169509

Sự cố cho tôi chỉ xảy ra khi bạn đến đầu/cuối của lớp cuộn và sau đó bắt đầu cử chỉ tiếp theo của bạn theo cùng một hướng. Sau đó, sự kiện bánh xe webkit quyết định rằng nó không thể đi theo cách đó và không cho phép bạn cuộn.

Có một giải pháp cho việc này: không bao giờ để lớp cuộn của bạn tiếp cận phần đầu hoặc cuối cuộn!

div.addEventListener('scroll',() => 
    div.scrollTop = Math.max(1, Math.min(div.scrollTop, 
             div.scrollHeight - div.clientHeight - 1)); 
); 

Tôi hy vọng một số người vẫn tham gia vào webkit thể sửa lỗi này (tôi là một chút nghỉ hưu từ mã trình duyệt), nó làm tổn thương lớp cuộn trên ios ở khắp mọi nơi.