vị trí: cố định, có hiệu suất rất kém trên thiết bị di động/máy tính bảng khi cuộn

Question

Tôi đang sử dụng position: fixed trong trang web của mình để sửa thanh điều hướng trong cổng xem, giống như thanh màu xanh của facebook, nhưng khi chúng tôi thử trên thiết bị di động/thiết bị máy tính bảng (với sức mạnh xử lý thấp) thanh cố định này tạo ra một cú đánh rất tệ về hiệu suất, làm cho trải nghiệm người dùng rất xấu khi cuộn,

chúng tôi đã sử dụng một bài viết rất tốt để nâng cao khả năng cuộn đã làm, như:

• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
• https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html

Sau rất nhiều thay đổi dựa trên những bài viết này, chúng tôi đã đạt tới điểm mà position: fixed là cuộc điều tra duy nhất còn lại để chúng ta tăng cường trong.

Các trang web có một siêu mịn cuộn khi chúng tôi thay đổi nó thành position: absolute. Nhưng với việc sửa chữa nó, việc cuộn có một nhược điểm rất tồi tệ đến mức nó có thể treo trình duyệt Safari trên iPad khi cuộn theo một cách nhất định, bạn có biết cách sử dụng position: fixed với hiệu suất tốt trên máy tính bảng/thiết bị di động không?

Answer 1

Nếu bạn "tablet/thiết bị di động", trong đó có vấn đề hiệu suất, có một cơ chế Webkit bạn có thể có thể tìm thấy câu trả lời ở đây: Chrome slow scrolling with fixed position elements

câu trả lời nhanh: cố gắng thêm -webkit-transform: translateZ(0); trên khối cố định.

Answer 2

Để có được một di chuyển mượt mà trên thiết bị di động, cũng có khi có "position: absolute",

bạn chỉ cần thêm vào Div thuộc tính css

"-webkit-overflow-scrolling : chạm;"