Di chuyển động của Safari Safari không hoạt động

Question

Tôi đang gặp sự cố với trang web đáp ứng tại thời điểm này.

Tất cả nhưng một trong các trang không có được đà di chuyển bạn thường nhận được từ việc sử dụng Internet trên điện thoại của mình. Tôi không chắc chắn nếu điều này được giới hạn cho safari di động hoặc các trình duyệt di động khác, tôi chỉ mới bắt đầu công việc đáp ứng trên trang web này.

Nhưng, có ai biết tại sao một số trang có thể không có động lượng cuộn không? Một số trang khá nặng nề với các hình ảnh và một chút jQuery, nhưng tôi không nghĩ rằng có đủ để gây ra các vấn đề hiển thị.

Bất kỳ ý tưởng nào?

Liên kết tới trang web nhà phát triển là: apt.codeplayground.co.uk.

[EDIT]

Có dường như là một vấn đề với .wrapper div của chúng tôi, vì điều này đã không được đưa vào về trang đó đang làm việc, bây giờ chúng tôi đã bao gồm nó cuộn không hoạt động đúng.

Answer 1

Tôi vừa gặp sự cố tương tự. Tôi tìm thấy this link, giải quyết được vấn đề.

Thêm dòng css này vào phần tử cuộn: -webkit-overflow-scrolling: touch;

#element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

Answer 2

Chỉ thân máy mới có được cuộn gốc. Bất kỳ yếu tố nào có cuộn quá tải đều rất chậm. chạm di chuyển có thể khắc phục điều đó nhưng tốt hơn là để cơ thể cuộn nếu bạn có thể. Nó nhanh hơn nhiều và sử dụng kết cấu GPU tổng hợp tốt hơn nhiều.

Cuộn cảm ứng với tạo ảnh chụp nhanh của phần tử có thể cuộn khi bạn bắt đầu cuộn. Nó cho biết thêm hình ảnh đó như là một kết cấu GPU sau đó khi bạn ngừng di chuyển nó phá hủy kết cấu GPU. Cho phép cuộn cơ thể sử dụng bộ nhớ kết cấu của bạn tốt hơn và nó thường là giải pháp tốt hơn.

Answer 3

Cùng với những gì @Mark đã nói, liên quan đến thuộc tính css, chúng ta cần phải nhớ rằng thuộc tính này cần phải được cung cấp cho phụ huynh của nội dung cuộn.

Ý nghĩa động lượng có thể hoạt động trên vùng chứa nội dung cần thiết để cuộn. Không phải trên nội dung trực tiếp, nếu không anh ta không thể hiểu được làm thế nào và cho những gì để cung cấp cho đà.

.element_that_scrolls 
{ 
    overflow:auto; 
    -webkit-overflow-scrolling: touch; 
} 

//Wrong 
<ul class="element_that_scrolls"> 
    ... 
</ul> 

//Correct 
<div class="element_that_scrolls"> 
    <ul> 
     ... 
    </ul> 
</div>