WKWebView Проблемы с рендерингом CSS при повороте экрана

Question

Прежде всего, все работает отлично на UIWebView на всех возможных версиях iOS, поэтому это конкретная проблема WKWebView.

После того как я завершил реализацию WKWebView, я столкнулся с массивной графической ошибкой/проблемой. В портрете мое приложение отлично работает, но когда я поворачиваю его в ландшафт, происходит что-то странное, мои верхние и нижние колонтитулы не отображаются правильно.

Если я просматриваю свой веб-код, я вижу, что ширина CSS в DOM обновляется с правильными данными, но я могу видеть только ширину портретной ориентации (320 пикселей) верхнего/нижнего колонтитула, даже если он читает style=“width: 568px;” в DOM.

Я использую positioning:fixed, но если я перехожу к позиционированию: относительный он отображает как ожидалось при прокрутке (к сожалению, относительное позиционирование в данном случае не является вариантом). Если я нажимаю на верхний или нижний колонтитул или прокручиваю где-то на экране , то верхний и нижний колонтитулы как-то обновляются и отображаются правильно и отображаются как ожидалось (требуется только 1px прокрутки).

Я попытаюсь проиллюстрировать, как это выглядит.

Красный = Видимый
Blue = Invisible (даже если он есть, и события запускаются при нажатии и прокрутке).

Любой опытный этот вопрос перед и получил решение?

Answer 1

Я думал, что я единственный! :) Я использую Xamarin «версию» WKWebView и имею ТОЧНУЮ ту же проблему. Из того, что я подозреваю, сам WKWebView не обновляет макет страницы правильно, и я не смог найти какой-либо код, чтобы заставить его.

Таким образом, хотя это не правильное решение, то, что я сделал сейчас, заключается в том, чтобы вставить некоторый javascript в страницу на экране, чтобы установить ширину заголовка \ footer. Регулировка ширины немного заметна, но, по крайней мере, она разрешается без необходимости прокрутки страницы.

Надеюсь, это поможет, по крайней мере, до тех пор, пока проблема в WKWebView не будет правильно решена.

Answer 2

Это происходило со мной, как хорошо, и после многих проб и ошибок, я был в состоянии исправить это, в моем случае, с помощью следующего кода JavaScript/JQuery в веб-контента:

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

несколько замечаний по поводу этого решения:

• Это работает для меня, потому что веб-контент Я нагрузка целиком состоит из неподвижных элементов, которые имеют overflow: auto набор для прокрутки содержимого в них. Таким образом, я никогда не прокручиваю всю страницу, поэтому я могу сбросить позицию прокрутки до 0, 0. Если все свитки всей страницы вы, вероятно, можете адаптировать этот метод, добавив или вычитая 1 из положения прокрутки, но будьте осторожны; страница должна фактически прокрутить, чтобы она работала. Если scrollY вашей страницы будет максимальным, скажем, 3000, и вы попытаетесь установить его на 3001, что не будет работать, вам нужно будет сделать 2999.
• Значение тайм-аута 700, вероятно, слишком велико для ваших целей; попробуйте уменьшить его.

Я пробовал практически все, что мог придумать; единственное решение, которое я мог бы найти, что работа надёжно, - это принудительное изменение прокрутки после события вращения.

Ждем этого исправления!

Answer 3

У меня такая же проблема в приложении, где я не контролирую содержимое HTML, поэтому я не могу изменить javascript для этого.

Ошибки не будут исправлены, если инженеры Apple не знают, что они существуют. Я не мог найти ссылку на эту проблему в системе отчетности ошибки так ...

Пожалуйста, сообщите об этом компании Apple в bugreport.apple.com ускорить починку

Вы можете ссылаться на сообщении об ошибке 20568425: CSS элементы в WKWebView неправильно отображаются при повороте устройства

Answer 4

Не лучшее исправление, но вот работа. Похоже, что WKWebView не делает недействительным его содержимое при изменениях вращения, но делает его недействительным в прокрутке (см. Здесь: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Так как скроллинг аннулирует его и заставить CSS для повторной визуализации вы могли бы сделать что-то вроде этого:

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

Вы могли бы использовать, что сейчас, пока радар не будет исправлена.

UPDATE:

Возможно такое поведение будет исправлено в прошивке 9.

Answer 5

Как и другие люди сказали, это должно быть ошибкой, ниже мой Javascript исправить, надеюсь, что он работает для вас или кого-то :

//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);