Vấn đề với cuộn trong iOS 5 bằng cách sử dụng -webkit-overflow-scrolling

Question

Tôi có một trang HTML có chiều cao cố định div nên được cuộn (chỉ theo chiều dọc). Trong iOS 5 này có thể đạt được sử dụng:

overflow-y: auto; 
-webkit-overflow-scrolling: touch; 

Các div chứa một danh sách có thứ tự với khoảng 10 mặt hàng.

Các công trình cuộn, nhưng đôi khi nó cuộn chỉ khi tôi vuốt ngón tay theo đường chéo hoặc thậm chí theo chiều ngang và không theo chiều dọc như trước.

Tôi tự hỏi liệu có ai gặp sự cố này không. Tôi không muốn nghĩ rằng đó là một lỗi trong iOS5, nhưng tôi không thể tìm ra những gì tôi đang làm sai bởi vì hầu hết thời gian nó hoạt động tốt.

Answer 1

Tôi đã gặp sự cố tương tự. Vấn đề hóa ra là do hai iframe kích thước bằng không mà trang web của tôi sử dụng để theo dõi các thay đổi lịch sử và các tập lệnh tải. Loại bỏ những vấn đề này. Tôi đã gửi một lỗi với táo, chờ đợi để nghe lại từ họ.

Kiểm tra xem bạn có bất kỳ iframe nào trên trang của bạn có thể là nguyên nhân hay không.

Answer 2

Bạn cần phải đặt thiết lập css này trong file css của bạn - một trong những bạn nạp bằng cách sử dụng biến content_css cấu hình:

body { 
    -webkit-transform: translate3d(0, 0, 0); 
} 

Các tùy chọn khác là để thiết lập các css trực tiếp từ mã trên TinyMCE khởi:

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0)); 

Answer 3

tôi đã tìm thấy một giải pháp hacky nhưng nó cần javascript ...

tôi stumbled khi vấn đề đó trong khi tải các nút cuộn qua ajax và nối chúng với js.

tôi phát hiện ra rằng đặt lại thuộc tính -webkit-overflow-scrolling với js lưu trong ngày

JS Mã sản phẩm:

var myDiv = $('.myDiv'); 
myDiv.css('-webkit-overflow-scrolling','auto'); 
function fn(){ 
    myDiv.css('-webkit-overflow-scrolling','touch'); 
} 
setTimeout(fn,500); 

Nó thực sự sucks rằng chúng ta phải gọi phương thức setTimeout nhưng đó là cách duy nhất tôi có thể nghĩ ra ...

EDIT: Coi chừng display:none

Webkit overflow scrolling touch CSS bug on iPad

Answer 4

Tôi gặp sự cố tương tự trong iOS 5.1.1 và hóa ra là do một yếu tố giả ::after giả với position: fixed nằm trên một phần tử chứa danh sách cuộn thể hiện hành vi "trục cuộn sai". Details here.