javascript - WKWebView CSS-renderingsproblemer ved skærmrotation

Først og fremmest fungerer alt perfekt på UIWebView på alle mulige iOS-versioner, så dette er et specifikt WKWebView-problem.

Efter jeg har fuldført implementeringen af WKWebView, stødte jeg på en massiv grafisk fejl/problematik. I portræt fungerer min applikation fint, men når jeg roterer den til landskab, sker der noget mærkeligt, min header og footer bliver ikke vist korrekt.

Hvis jeg ser i min webkode, kan jeg se, at CSS-bredden bliver opdateret i DOM'en med de korrekte data, men jeg kan kun se bredden af portrætorientering (320px) af header/footer, selvom det læses style=“width: 568px; ” i DOM'en.

Jeg bruger positioning:fixed, men hvis jeg ændrer til positioning:relative, gengives det som forventet ved skærmomdrejning (desværre er relativ positionering ikke en mulighed i dette tilfælde). Hvis jeg klikker på header/footer eller scroller et sted på skærmen, opdateres header og footer på en eller anden måde og gengives korrekt og vises som forventet (kræver kun 1px scrolling).

Jeg vil forsøge at illustrere, hvordan det ser ud.

Rød=Synlig
Blå=Usynlig (selvom den er der og begivenheder udløses ved klik/rulning).

Er der nogen, der har oplevet dette problem før og har fået en løsning?

Svar #1

Ikke den bedste løsning, men her er en midlertidig løsning. Det ser ud til, at WKWebView ikke ugyldiggør sit indhold ved rotationsændringer, men gør det ved rulning (se her: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Da rulning vil ugyldiggøre det og tvinge CSS til at gengives igen, kunne du gøre noget lignende dette:

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

Du kunne bruge det indtil videre, indtil radaren bliver repareret.

OPDATERING:

Formodentlig vil denne adfærd blive rettet i iOS 9.

Svar #2

Jeg har det samme problem i en app, hvor jeg ikke har kontrol over HTML-indholdet, så jeg kan ikke ændre JavaScript for at lave en snedig løsning på dette.

Fejl bliver ikke rettet, medmindre Apples ingeniører ved, at de eksisterer. Jeg kunne ikke finde en reference til dette problem i fejlrapporteringssystemet, så...

Rapporter venligst dette til Apple på bugreport.apple.com for at fremskynde en løsning

Du kan henvise til fejlrapport 20568425: CSS-elementer inden for en WKWebView vises ikke korrekt, når enheden roteres