JS/overflow: các vấn đề về hiệu suất ẩn trong Safari trên iPad/iOS

Question

Tôi đang làm việc trên hệ thống cuộn/di chuyển giống như Google Maps. Hệ thống được cho là đơn giản hơn rất nhiều so với "bản gốc" (không phóng to) và do đó được xây dựng theo kiểu thời trang khá thẳng về phía trước:

• Có div chứa đại diện cho chế độ xem có bộ tràn bị ẩn và một kích thước cố định
• div này chứa một div đó là được gay gắt xung quanh dựa trên chuột phong trào
• Tùy thuộc vào divs vùng hiển thị cố định (hoặc imgs) được bổ sung vào div panning để hiển thị các bộ phận của một hình ảnh rất lớn

Thiết lập này hoạt động như được cho là o. Đặc biệt trong các trình duyệt thông thường trên máy tính để bàn, nó hoạt động hoàn hảo. Cuộn là chất lỏng.

Không quá nhiều trên iPad mặc dù: Đây là toàn bộ điều cảm thấy rất chậm chạp. Có một sự chậm trễ đáng chú ý rõ ràng khi panning xung quanh và phải mất rất lâu cho các nhấp chuột được đăng ký.

Để làm cho nó hoạt động với giao diện cảm ứng ngay từ đầu, tôi phải "dịch" sự kiện chạm vào sự kiện chuột. Mặc dù rất khó để kiểm tra sự khác biệt về hiệu suất mà không có điều này, tôi tin rằng nó không phải là nguyên nhân của vấn đề vì sự đáp ứng trên các nhấp chuột đơn giản vẫn thấp như nhau khi tắt nó.

Tôi đã cố gắng tìm ra nguyên nhân của việc này bằng cách xem nhanh bản đồ Google Maps (chỉ hoạt động tốt trên iPad như ở bất kỳ nơi nào khác), nhưng vô ích (chỉ đơn giản là quá phức tạp để có một ý tưởng nhanh). Vì vậy, sau khi tất cả tôi nghĩ rằng nó có thể có một cái gì đó để làm với cách di động Safari handels các divs trong một container thiết lập để "tràn: ẩn;", một số vấn đề bộ nhớ đệm hoặc JS-thủ thuật cần thiết tôi không biết.

Bất kỳ ý tưởng nào tôi có thể bắt đầu tìm kiếm?

Answer 1

tràn có thể là một vấn đề đối với hiệu suất. Bạn nên thử z-index.

suy nghĩ về một 5 divs đặt tương tự (dưới, trái, trung tâm, phải và trên)

bộ trung tâm của z-index tới 1 và những người khác đến 2 như vậy, nó sẽ làm việc như một tràn: bất động sản ẩn giao .

xin vui lòng không phải vậy; bạn nên cung cấp màu nền cho các div với z-index 2 để giữ các vùng tràn bị ẩn khỏi div trung tâm.

Hy vọng nó hoạt động!