Question

首先，在所有可能的iOS版本上，UIWebView上的所有内容都能完美运行，因此这是一个特定的WKWebView问题。

在我完成WKWebView的实施后，我遇到了一个巨大的图形错误/问题。在肖像我的应用程序工作正常，但当我将其旋转到横向时发生奇怪的事情，我的页眉和页脚无法正确呈现。

如果我查看我的webcode，我可以看到在DOM中使用正确的数据更新CSS宽度，但我只能看到页眉/页脚的纵向（320px）的宽度，即使它读取{{ DOM中的1}}。

我使用style=“width: 568px;”但是如果我改变到定位：相对它在屏幕旋转时按预期呈现（遗憾的是相对定位在这种情况下不是一个选项）。如果我单击页眉/页脚或滚动屏幕上的某个位置页眉和页脚以某种方式更新并正确呈现并按预期显示（仅需要1px的滚动）。

我会尝试说明它的样子。

红色=可见光蓝色=不可见（即使它在那里，事件在点击/滚动时启动）。

之前有人遇到过此问题并获得解决方案吗？

Answer 1

我在应用程序中遇到同样的问题，我无法控制HTML内容，所以我无法改变javascript来解决这个问题。

除非Apple的工程师知道它们存在，否则不会修复错误。我无法在错误报告系统中找到对此问题的引用，所以......

请通过bugreport.apple.com向Apple报告，以加快解决问题

您可以参考错误报告20568425：WKWebView中的CSS元素在旋转设备时无法正确布局

Answer 2

不是最好的修复，但这是一个解决方法。看起来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)
    }
}

你可以暂时使用它，直到雷达得到修复。

<强>更新

据说这种行为将在iOS 9中修复。

Answer 3

我以为我是唯一的一个！ :) 我正在使用Xamarin＆＃34;版本＆＃34; WKWebView，并有完全相同的问题。从我怀疑它的WKWebView本身没有正确更新页面布局，我还没有能够找到任何强制它的代码。

所以，虽然它不是一个合适的解决方案，但我现在所做的就是在屏幕旋转中向页面注入一些javascript来设置header \ footer的宽度。宽度调整略微明显，但至少它自行解析而无需滚动页面。

希望这会有所帮助，至少在WKWebView中的问题得到妥善解决之前。

Answer 4

这也发生在我身上，经过大量的反复试验后，我能够在网络内容中使用以下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 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);

Answer 6

解决了https://github.com/WayneLin1215/Swift-WKYoutubePlayer中的类似问题。通过修改YTPlayerView.html模板中的window.onresize方法：

window.onresize = function() { setTimeout(function() { player.setSize(window.innerWidth, window.innerHeight) }, 100); }

WKWebView CSS渲染屏幕旋转问题

6 个答案: