[TIMOB-25449] iOS: WebView content offset of 20 pixels when positioned at the top

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2017-11-08T16:17:17.000+0000
Affected Version/s	n/a
Fix Version/s	Release 7.0.0
Components	iOS
Labels	ios, ios11
Reporter	Matt Mendick
Assignee	Hans Knöchel
Created	2017-10-27T18:01:52.000+0000
Updated	2017-11-08T16:17:32.000+0000

Description

A "fullscreen" Titanium.UI.WebView in 6.2.2.GA (older versions too, at least 6.1.2.GA) will contain a dead zone at the top which is 20dip tall (top bar sized). The bar disappears upon scrolling a page that scrolls, but if a full-screen mapping application which manages its own touches and navigation is used, the bar is constant. This does not appear on Android. Code to reproduce:

// blue to illustrate the white is not from this window
var win = Ti.UI.createWindow({backgroundColor: 'blue'});

// full screen webview, background green to show the "dead" area at the top
var webview = Ti.UI.createWebView({
	// a webpage that has enough content to scroll and has a gray background color
    url: 'http://daringfireball.net',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#00cc00'
});

win.add(webview);
win.open();

See screenshot for example. The green area (#00cc00) is the backgroundColor of the webview. If that color is unset, it defaults to white. I'm working around this by hiding the webview inside another view container and setting the top property to -20, but this shouldn't be necessary in my mind. The issue _does not_ seem to happen if you set the top property to something farther down the page by at least 20 dips:

// blue to illustrate the white is not from this window
var win = Ti.UI.createWindow({backgroundColor: 'blue'});

// full screen webview, background green to show the "dead" area at the top
var webview = Ti.UI.createWebView({
	// a webpage that has enough content to scroll and has a gray background color
    url: 'http://daringfireball.net',
    top: 20,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#00cc00'
});

win.add(webview);
win.open();

Attachments

File	Date	Size
Screen Shot 2017-10-27 at 1.58.47 PM.png	2017-10-27T18:01:43.000+0000	127782

Comments

Hans Knöchel 2017-10-27

This seems to be a breaking change in iOS 11+ only, iOS 8/9/10 behave correctly. See more details [here](https://stackoverflow.com/a/45973538/5537752). The fix is to set the content-inset-adjustment-behavior to "never". Unfortunately, 6.3.0 is already in prerelease stage and no tickets can be added to the version anymore, but it will then go into 7.0.0 for sure. To fix it today, add the following to your "TiUIWebView.m" inside the -(UIWebView*)webview method in ~/Library/Application Support/Titanium/mobilesdk/osx/6.2.2.GA/iphone/classes: #if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_11_0 if ([TiUtils isIOSVersionOrGreater:@"11.0"]) { webview.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; } #endif
Matt Mendick 2017-10-27

Hans, that seems to be the issue and the fix did the trick - thanks very much for your help!
Hans Knöchel 2017-10-28

PR: https://github.com/appcelerator/titanium_mobile/pull/9569 Test-Case: See above
Eric Wieber 2017-11-08

Verified in SDK build 7.0.0.v20171107142411

JSON Source