Cuộn cuộn trên iOS -webkit-overflow trên trục sai hoặc không phải ở tất cả

Question

Tôi đang tạo ứng dụng dành cho thiết bị di động cho iOS, với html5. Tôi đang sử dụng "-webkit-overflow-scrolling: chạm" để có được quán tính quán tính di chuyển, nhưng nó rất lỗi. Tôi đã giải quyết được vấn đề với nội dung không hiển thị cho đến khi cuộn dừng, nhưng một lỗi liên tục là:

Khi tôi cố gắng cuộn lên và xuống, không có gì xảy ra, nhưng khi tôi cố cuộn theo chiều ngang, nội dung cuộn theo chiều dọc (trục 90 độ). Nếu tôi điều hướng xung quanh ứng dụng của mình và quay lại trang, đôi khi nó sẽ được sửa. Ngoài ra, đôi khi nó sẽ không cuộn ở tất cả, mặc dù có đầy đủ nội dung.

Từ những gì tôi đã googled, sự đồng thuận dường như là Apple nhận thức được lỗi này, và không có ý định sửa chữa nó bất cứ lúc nào sớm. Có ai tìm thấy một giải pháp để có được -webkit-overflow-scrolling để hoạt động chính xác không?

Answer 1

Tôi cũng đã phải vật lộn với lỗi này trong nhiều tháng. Các đặc tính tốt nhất mà tôi đã tìm thấy là:

https://bugs.webkit.org/show_bug.cgi?id=87391

mà nói rằng nó sẽ xảy ra khi trang có một iFrame và các nội dung được quy định từ Javascript. Cách giải quyết hiện tại của tôi trong The Graphics Codex version 1.6 là sử dụng iScroll4 để cuộn trang một cách rõ ràng thay vì sử dụng cuộn cảm ứng. Vì Javascript là đơn luồng, điều này có thể chậm nếu bạn cũng đang thực hiện hoạt ảnh hoặc tải nội dung nền.

Answer 2

Tôi gặp phải vấn đề tương tự: nút sử dụng -webkit-overflow-scrolling: scroll sẽ liên tục cuộn lên/xuống chỉ bằng cử chỉ cuộn trái/phải.

Dưới đây là những gì tôi tìm thấy là nguyên nhân có thể:

• iframe hiện trên trang bất cứ nơi nào, có thể nhìn thấy hoặc (source)
• visibility: hidden áp dụng cho bất cứ phụ huynh của nút cuộn (source)

Tuy nhiên, không có tình huống nào trong số này xuất hiện trong ứng dụng web của tôi. Tôi đã có một hộp thoại có thể cuộn được <ul> bên trong một hộp thoại CSS thuần túy mà tôi đã viết sử dụng mẹo thông minh để thêm lớp lót trong suốt - một phần tử giả ::after với position: fixed.

Khi tôi xóa position: fixed khỏi phần tử giả, sự cố đã biến mất! Tất nhiên, điều này làm cho thủ thuật thông minh của tôi vô dụng, nhưng thật thú vị khi biết rằng lỗi này có thể được kích hoạt bởi tình huống này.

Device: iOS 5.1.1 trên 2012 iPad 3 (võng mạc)

mã vi phạm:

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
} 

tl; dr: nếu có chứa các yếu tố có một vị trí cố định pseudo- yếu tố, loại bỏ nó có thể khắc phục vấn đề di chuyển của bạn.

Answer 3

Tôi biết rằng vấn đề này khá cũ, nhưng tôi phải làm cho trang web của mình hoạt động trên iOS 5. Rất tiếc, tôi không thể xóa hoặc thay thế iframe. Tôi đã nhận thấy rằng sự hiện diện của khung nội tuyến đã gây ra sự cố chỉ khi nó được hiển thị trước phần tử được cố gắng cuộn trơn tru.Thêm iframe vào tài liệu sau (sau khi phần tử có -webkit-overflow-scrolling: chạm) đã khắc phục sự cố :)