Problemy z wyświetlaniem CSS WKWebView na rotacji ekranu

Question

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

Po zakończeniu wdrożenia WKWebView wpadłem na ogromny graficzny błąd/problem. W obrazie moja aplikacja działa dobrze, ale kiedy obracam ją do krajobrazu, dzieje się coś dziwnego, mój nagłówek i stopka nie są renderowane poprawnie.

Jeśli zajrzę do mojego kodu webowego, widzę, że szerokość CSS jest aktualizowana w DOM z poprawnymi danymi, ale widzę tylko szerokość orientacji pionowej (320px) nagłówka/stopki, mimo że czyta ona style=“width: 568px;” w DOM.

Używam positioning:fixed, ale jeśli zmienię pozycję: relatywna renderuje się zgodnie z oczekiwaniami na screenrotation (niestety względne pozycjonowanie nie jest w tym przypadku opcją). Jeśli kliknę nagłówek/stopkę lub przewińę gdzieś na ekranie, nagłówek i stopka jakoś aktualizują się i renderują poprawnie i są wyświetlane zgodnie z oczekiwaniami (wymaga tylko przewijania o 1 piksel).

Postaram się zilustrować, jak to wygląda.

Czerwony = Widoczny
Niebieski = Niewidoczny (mimo że istnieje i zdarzenia są uruchamiane po kliknięciu/przewinięciu).

Każdy doświadczył ten problem przed i got rozwiązanie?

Answer 1

Myślałem, że jestem jedyny! :) Używam "wersji" Xamarin z WKWebView, i mam ten sam problem EXACT. Z tego, co podejrzewam, że WKWebView sam nie aktualizuje poprawnie układu strony i nie udało mi się znaleźć żadnego kodu, aby go wymusić.

Tak więc, choć nie jest to właściwe rozwiązanie, na razie wylądowałem w celu wstrzyknięcia niektórych javascriptów na stronę na ekranie, aby ustawić szerokość nagłówka \ footer. Regulacja szerokości jest nieznacznie zauważalna, ale przynajmniej rozwiązuje się bez konieczności przewijania strony.

Mam nadzieję, że to pomoże, przynajmniej do momentu, aż problem w WKWebView zostanie rozwiązany poprawnie.

Answer 2

to się ze mną dzieje, jak również i po wielu prób i błędów udało mi się go naprawić, w moim przypadku, z następującego kodu JavaScript/jQuery zawartości internetowej:

$(window).on('resize', function() { 
    setTimeout(function() { 
     window.scrollTo(0, 0); 
     window.scrollTo(0, 1); 
    }, 700); 
}); 

kilka uwag na temat tego rozwiązania:

• działa to dla mnie, bo jestem treści internetowych ładowania składa się wyłącznie ze stałych elementów, które mają overflow: auto zestaw do przewijania zawartości w nich. Dlatego nigdy nie przewijam całej strony, więc mogę zresetować pozycję przewijania do 0, 0. Jeśli twoja cała strona przewija się, prawdopodobnie możesz dostosować tę technikę dodając lub odejmując 1 od pozycji przewijania, ale zachowaj ostrożność; strona musi faktycznie przewinąć, aby zadziałał. Jeśli numer scrollY Twojej strony wynosi maksymalnie 3000, a spróbujesz ustawić 3001, który nie zadziała, musisz wykonać 2999.
• Wartość limitu czasu wynosząca 700 jest prawdopodobnie zbyt wysoka dla twoich celów; spróbuj go zmniejszyć.

Próbowałem prawie wszystkiego, co mogłem wymyślić; Jedynym rozwiązaniem, które mogłem znaleźć, było niezawodnie wymuszenie przewijania zmian po zdarzeniu rotacyjnym.

Czekamy, aż to się naprawi!

Answer 3

Mam taki sam problem w aplikacji, w której nie mam kontroli nad treścią HTML, więc nie mogę zmienić javascript, aby to zrobić.

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

proszę zgłosić to do Apple w bugreport.apple.com celem przyspieszenia Rozwiąż

Można odwołać zgłoszenie błędu 20568425: CSS elementy w ramach WKWebView nie układają się poprawnie po obróceniu urządzenia

Answer 4

To nie najlepsza poprawka, ale tutaj jest praca. Wygląda na to, że WKWebView nie unieważnia jego zawartości przy zmianach rotacji, ale unieważnia ją podczas przewijania (patrz tutaj: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Ponieważ przewijanie będzie go unieważnić i zmusić CSS ponowne renderowanie mógłby zrobić coś takiego:

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

Można użyć że teraz aż radar zostanie naprawiony.

UPDATE:

Podobno takie zachowanie zostanie ustalona w iOS 9.

Answer 5

Jak inni powiedział, powinien to być błąd, poniżej jest mój javascript poprawka, mam nadzieję, że praca dla Ciebie lub kogoś :

//fix IOS WKWebview rotate bug 
var viewport_width = $(window).width(); 
var viewport_height = $(window).height(); 
setInterval(function(){ 
    if($(window).width()!=viewport_width || $(window).height()!=viewport_height){ 
     viewport_width = $(window).width(); 
     viewport_height = $(window).height(); 
     window.location = '#wkwrf'; 
     window.history.back(); 
    } 
}, 200);