javascript - Problemy z renderowaniem CSS w WKWebView podczas obracania ekranu

Przede wszystkim wszystko działa idealnie na UIWebView we wszystkich możliwych wersjach iOS, więc jest to specyficzny problem WKWebView.

Po ukończeniu implementacji WKWebView natknąłem się na poważny błąd/graficzny problem. W trybie portretowym moja aplikacja działa poprawnie, ale po obróceniu jej do trybu poziomego dzieje się coś dziwnego - mój nagłówek i stopka nie wyświetlają się poprawnie.

Jeśli spojrzę na mój kod sieciowy, mogę zobaczyć, że szerokość CSS jest aktualizowana w DOM ze prawidłowymi danymi, ale mogę zobaczyć tylko szerokość orientacji pionowej (320px) nagłówka/stopki, mimo że w DOM widnieje style=“width: 568px; ”.

Używam positioning:fixed, ale jeśli zmienię na positioning:relative, renderuje się zgodnie z oczekiwaniami przy obracaniu ekranu (niestety pozycjonowanie względne nie wchodzi w grę w tym przypadku). Jeśli kliknę w nagłówek/stopkę lub przewinę gdzieś ekran, nagłówek i stopka jakoś się aktualizują i renderują poprawnie, pokazując się zgodnie z oczekiwaniami (wystarczy przesunąć ekran o 1 piksel).

Spróbuję zilustrować, jak to wygląda.

Czerwony=Widoczny
Niebieski=Niewidoczny (mimo że jest obecny i zdarzenia uruchamiają się przy kliknięciu/przewijaniu).

Czy ktoś wcześniej spotkał się z tym problemem i znalazł rozwiązanie?

Odpowiedź #1

Nie jest to najlepsze rozwiązanie, ale oto obejście. Wygląda na to, że WKWebView nie unieważnia swojej zawartości przy zmianach orientacji, ale unieważnia ją podczas przewijania (zobacz tutaj: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Ponieważ przewijanie spowoduje unieważnienie i wymusi ponowne renderowanie CSS, można zrobić coś takiego:

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

Możesz używać tego na razie, dopóki radar nie zostanie naprawiony.

AKTUALIZACJA:

Rzekomo to zachowanie zostanie naprawione w iOS 9.

Odpowiedź #2

Mam ten sam problem w aplikacji, w której nie mam kontroli nad zawartością HTML, więc nie mogę zmienić JavaScript, aby to obejść.

Błędy nie zostaną naprawione, chyba że inżynierowie Apple będą wiedzieć, że istnieją. Nie mogłem znaleźć odniesienia do tego problemu w systemie zgłaszania błędów, więc...

Proszę zgłosić to do Apple na stronie bugreport.apple.com, aby przyspieszyć naprawę

Możesz odnieść się do raportu o błędzie 20568425: elementy CSS w WKWebView nie układają się prawidłowo po obróceniu urządzenia