Mac OS X WebKit và vị trí CSS: di chuyển cố định

Question

Chúng tôi đã gặp sự cố tối ưu hóa khi sử dụng WebKit trên Mac OS X mà chúng tôi hy vọng ai đó có thể giúp chúng tôi.

Chúng tôi đã viết một ứng dụng Cocoa cho Mac OS X về cơ bản quản lý một WebView đơn trỏ đến trang web trực tuyến của chúng tôi. Tất cả mọi thứ đang làm việc tốt cho hầu hết các phần. Tuy nhiên trang web của chúng tôi sử dụng vị trí của CSS: cố định để giữ một "thanh tiêu đề" bị khóa ở phía trên cùng của WebView, tương tự như thanh "Chào mừng" màu cam lớn ở đầu StackOverflow.com. Chúng tôi đã xác định rằng với vị trí: cố định đang hoạt động, việc cuộn WebView sẽ buộc toàn bộ trang web phải tự vẽ lại, điều này khiến cho việc di chuyển trở nên chậm chạp. Với vị trí: cố định vô hiệu hóa, di chuyển rất nhanh và chất lỏng; chỉ các phần tử trang được cuộn "vào chế độ xem" cần được vẽ.

Chúng tôi biết rằng đây không phải là lỗi trong mã ứng dụng Cocoa của chúng tôi, cũng không phải là vấn đề với mã HTML/CSS của chúng tôi. Việc di chuyển chậm tương tự xảy ra khi sử dụng mã kiểm tra WebKit từ Apple. Chúng tôi có thể chỉ mã kiểm tra của Apple là http://www.StackOverflow.com làm thử nghiệm và chúng tôi thấy hành vi giống hệt nhau. Ngoài ra còn có một trang thử nghiệm trong cơ sở dữ liệu lỗi của Mozilla mà chúng tôi đang sử dụng để kiểm tra sự cố (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). Điều kỳ lạ là một số trình duyệt dựa trên WebKit trên máy Mac (ví dụ: Safari và Chrome) không có vấn đề này; cuộn luôn luôn nhanh trên các trang sử dụng vị trí của CSS: cố định với hai trình duyệt đó.

Có ai khác gặp sự cố này với WebKit trên OS X không? Nếu có, chúng ta có thể làm gì để tăng tốc độ di chuyển của mình? Cảm ơn.

Answer 1

Tôi có thể là cách tắt ở đây vì tôi không chắc liệu điều tương tự có áp dụng trong chế độ xem web của bạn hay không nhưng việc sử dụng kiểu buộc hướng dẫn lên lớp của riêng nó có thể hữu ích.

Giống như dịchZ (0) hoặc dịch3d (0,0,0,). Tôi đã gặp các vấn đề tương tự khi xây dựng với Phonegap và áp dụng một số suy nghĩ để phân lớp thực sự giúp đỡ.

Tôi tin rằng trình duyệt có thể sử dụng tăng tốc phần cứng trong đó tham số thứ ba có liên quan.

Answer 2

Tôi đã gặp sự cố tương tự: thanh cố định nhấp nháy khi tôi cuộn trang. Vì vậy, tôi đã buộc WebView sử dụng các lớp và tôi đã chỉnh sửa

[w setWantsLayer:YES]; 

Answer 3

Tôi gặp sự cố tương tự trong ứng dụng mac dựa trên webview của mình. Nó có đầu trang và chân trang với vị trí: thuộc tính css cố định. Webkit mới nhất được chuyển với 10.10.x trở lên không bị vấn đề này. Nó xảy ra trong webkit cho mavericks (10.9.x). Tôi đã làm việc này bằng cách đặt các thuộc tính này cho chế độ xem web

[self.webView setWantsLayer:YES]; 
    [self.webView setCanDrawSubviewsIntoLayer:YES];