javascript - Vấn đề hiển thị CSS trên WKWebView khi xoay màn hình

Trước hết, mọi thứ hoạt động hoàn hảo trên UIWebView trên tất cả các phiên bản iOS có thể, vì vậy đây là một vấn đề cụ thể của WKWebView.

Sau khi tôi hoàn thành việc triển khai WKWebView, tôi gặp phải một lỗi/vấn đề đồ họa nghiêm trọng. Ở chế độ dọc, ứng dụng của tôi hoạt động bình thường nhưng khi tôi xoay sang chế độ ngang, có điều gì đó lạ xảy ra, phần đầu và chân trang của tôi không hiển thị đúng.

Nếu tôi nhìn vào mã web của mình, tôi có thể thấy rằng chiều rộng CSS đang được cập nhật trong DOM với dữ liệu chính xác nhưng tôi chỉ có thể thấy chiều rộng của chế độ dọc (320px) của đầu trang/chân trang mặc dù nó hiển thị style=“width: 568px; ” trong DOM.

Tôi đang sử dụng positioning:fixed nhưng nếu tôi đổi sang positioning:relative thì nó hiển thị như mong đợi khi xoay màn hình (đáng tiếc là vị trí relative không phải là một lựa chọn trong trường hợp này). Nếu tôi nhấp vào header/footer hoặc cuộn đến đâu đó trên màn hình, header và footer bằng cách nào đó sẽ cập nhật và hiển thị đúng, được hiển thị như mong đợi (chỉ cần cuộn 1px).

Tôi sẽ cố gắng minh họa nó trông như thế nào.

Đỏ=Hiển thị
Xanh dương=Ẩn (mặc dù nó có đó và các sự kiện vẫn được kích hoạt khi nhấp/cuộn).

Có ai từng gặp vấn đề này trước đây và đã có giải pháp chưa?

Câu trả lời #1

Không phải là giải pháp tốt nhất nhưng đây là một cách khắc phục. Có vẻ như WKWebView không làm mới nội dung khi thay đổi xoay màn hình nhưng sẽ làm mới khi cuộn (xem tại đây: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Vì việc cuộn sẽ làm mới nó và buộc CSS phải hiển thị lại, bạn có thể làm điều gì đó như sau:

extension WKWebView {
    func invalidateVisibleRect() {
        let contentOffset = scrollView.contentOffset
        scrollView.setContentOffset(CGPoint(x: contentOffset.x, y: contentOffset.y + 1), animated: true)
    }
}

Bạn có thể sử dụng cái đó tạm thời cho đến khi radar được sửa xong.

CẬP NHẬT:

Theo giả định, hành vi này sẽ được sửa trong iOS 9.

Câu trả lời #2

Tôi đang gặp cùng một vấn đề trong một ứng dụng mà tôi không kiểm soát được nội dung HTML nên tôi không thể sửa đổi javascript để khắc phục tạm thời.

Lỗi sẽ không được sửa trừ khi các kỹ sư của Apple biết rằng chúng tồn tại. Tôi không thể tìm thấy tài liệu tham khảo về vấn đề này trong hệ thống báo cáo lỗi nên...

Vui lòng báo cáo điều này cho Apple tại bugreport.apple.com để đẩy nhanh việc khắc phục

Bạn có thể tham khảo báo cáo lỗi 20568425: Các phần tử CSS trong WKWebView không bố trí đúng khi thiết bị bị quay