iOS 11 UIWebView pop down by status bar

Question

In iOS 11, UIWebView is pop down by status bar. It may be affected by safe area inset introduced by iOS 11. I try to set the property contentInsetAdjustmentBehavior as below:

webView.scrollowView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAlways

It works. However, for some page using -webkit-overflow-scrolling, webView.scrollowView has another UIScrollowView(UIWebOverflowScrollView) as its subview. If I do not set the property contentInsetAdjustmentBehavior for that scrollView, the page elements will sink. If any other solution for this issue without setting the property contentInsetAdjustmentBehavior for all the scrollView of UIWebview.

score 17 · Accepted Answer · edited Mar 21 '18 at 14:51

Actually, I create a fullscreen webView with navigationBar hidden but statusBar not hidden. For WKWebView, Apple has fixed the bug here https://github.com/WebKit/webkit/commit/cb45630904c7655cc3fb41cbf89db9badd1ef601 since iOS 11 beta 8, so we can set the property contentInsetAdjustmentBehavior of wkWebView.scrollview:

wkWebView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever

For UIWebView(Apple has abandoned UIWebView), we can adjust the safearea of UIViewController by setting the property additionalSafeAreaInsets of rootViewController(yes, only the additionalSafeAreaInsets of rootViewController works):

navigationController.additionalSafeAreaInsets = UIEdgeInsetsMake(-20, 0, 0, 0);

or the frame of uiWebView:

uiWebView.frame = CGRectMake(0.0, -20, uiWebView.frame.size.width, uiWebView.frame.size.height + 20);

score 4 · Answer 2 · answered Sep 13 '17 at 23:30

If you want to handle this entirely in HTML and CSS, it is possible.

First, you'll need to add viewport-fit=cover to your viewport meta tag so that the WebView fills the full screen space behind the status bar.

Next, to make sure you're safely handling the iPhone X and its notched speaker/camera area, you'll need to set the padding to use one of the new CSS safe-area inset constants at both the top and bottom: i.e., padding-top: constant(safe-area-inset-top);

I wrote a bit more about these changes to the viewport and the new features like CSS constants added to support them: https://ayogo.com/blog/ios11-viewport/

score 1 · Answer 3 · answered Aug 22 '17 at 06:47

Im having similar problem. Im setting my UICollectionView contentInset pre iOS 11.

CGFloat topInset = [UIApplication sharedApplication].statusBarFrame.size.height + self.navigationController.navigationBar.frame.size.height;
CGFLoat bottomInset = self.tabBarController.tabBar.frame.size.height;     
self.collectionView.contentInset = UIEdgeInsetsMake(topInset, 0.f, bottomInset, 0.f);

My fix is this (Basically if iOS 11 don´t set contentInsets):

if (![self.collectionView respondsToSelector:NSSelectorFromString(@"contentInsetAdjustmentBehavior")]) 
{
   CGFloat topInset = [UIApplication sharedApplication].statusBarFrame.size.height + self.navigationController.navigationBar.frame.size.height;
   CGFLoat bottomInset = self.tabBarController.tabBar.frame.size.height;     
   self.collectionView.contentInset = UIEdgeInsetsMake(topInset, 0.f, bottomInset, 0.f);
}

iOS 11 UIWebView pop down by status bar

3 Answers3