[AC-6232] Regression - Webview deviceHeight reports incorrect number

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Needs more info
Resolution Date	2019-08-19T22:11:14.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	ios, webview
Reporter	roeland p
Assignee	Shak Hossain
Created	2019-04-29T11:14:57.000+0000
Updated	2019-08-19T22:11:15.000+0000

Description

I have webview anomalies on ios 12.1 simulator Ti.SDK 8. Looking to make a true fullscreen webview with a local html file. Ti.WebView itself honours the full device width / height, as can be seen from the red borders, however contents inside, act weirdly (see image of 2 scenarios using viewport-meta tag) When using Safari-Developer inspection I notice the actual -element / document.body.clientHeight = 647 is reporting not the "Ti.UI.WebView"-s height and off by 20px in this iPhone 8 simulator (which corresponds with the safeArea padding.top fyi) Ti.Webview.toImage().height = 667 but inside the webview: document.body.clientHeight = 647 === When running the same samples on Ti.SDK 7.5.2 GA, the deviceHeight inside the webview reports correctly and the webview's HTML uses the full height as the Ti.UI.Webview has. Might be related to TIMOB-26984 ?

Attachments

File	Date	Size
7.5.2-shows ok.png	2019-04-29T11:17:37.000+0000	713436
anomalies.png	2019-04-29T11:08:06.000+0000	3384035
iPhone7-contain-landscape.png	2019-05-01T02:24:42.000+0000	143850
iPhone7-contain-portrait.png	2019-05-01T02:24:39.000+0000	194844
iPhone7-cover-landscape.png	2019-05-01T02:25:35.000+0000	145787
iPhone7-cover-portrait.png	2019-05-01T02:25:32.000+0000	196442
iPhoneX-contain-landscape.png	2019-05-01T02:24:33.000+0000	147937
iPhoneX-contain-portrait.png	2019-05-01T02:24:26.000+0000	214441
iPhoneX-cover-landscape.png	2019-05-01T02:25:23.000+0000	143486
iPhoneX-cover-portrait.png	2019-05-01T02:25:18.000+0000	217760
WebViewInsetsTest.js	2019-05-01T02:28:57.000+0000	3401
wkwebviewtest.zip	2019-05-17T08:19:07.000+0000	8662963

Comments

Joshua Quick 2019-04-29

I haven't tried this myself, but I'm pretty sure this can be solved via a <meta/> viewport tag. For example... <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> </head> <body> <p>Your content goes here.</p> </body> </html> The key thing is the viewport-fit=cover which tells the WKWebView to ignore the safe-ares padding and allow content to be overlapped by the top status bar, iPhone X notch, and to not compensate for rounded corners.
roeland p 2019-04-30

@joshua please see the (2nd) attached image (anomalies.png) in the issue which has screenshot running with 2 different variations on "viewport" including an anomaly on the bottom of the viewport (right screenshot) when working with the "viewport-fit="cover" tag. It seems that with vieport-fit-cover indeed the safearea padding-top is put to 0, however WKwebview.innerHeight seems not aware that has those extra pixels available. (just a guess).
roeland p 2019-04-30

maybe this is due to me opening my "test"-controller from index.js which in my case just hosts a "tabgroup" and not a "window" element.
Joshua Quick 2019-04-30

Joshua Quick 2019-05-01

I've tested this with the following code.

   var htmlString =
   		'<!DOCTYPE html>\n' +
   		'<html>\n' +
   		'	<head>\n' +
   //		'		<meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
   //		'		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">\n' +
   		'		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">\n' +
   		'		<style>\n' +
   		'			p { background-color:limegreen; margin:4px }\n' +
   		'		</style>\n' +
   		'	</head>\n' +
   		'	<body style="margin:0; padding:0; background-color:yellow">\n' +
   		'		<p>Row 01: This is an HTML test.</p>\n' +
   		'		<p>Row 02: This is an HTML test.</p>\n' +
   		'		<p>Row 03: This is an HTML test.</p>\n' +
   		'		<p>Row 04: This is an HTML test.</p>\n' +
   		'		<p>Row 05: This is an HTML test.</p>\n' +
   		'		<p>Row 06: This is an HTML test.</p>\n' +
   		'		<p>Row 07: This is an HTML test.</p>\n' +
   		'		<p>Row 08: This is an HTML test.</p>\n' +
   		'		<p>Row 09: This is an HTML test.</p>\n' +
   		'		<p>Row 10: This is an HTML test.</p>\n' +
   		'		<p>Row 11: This is an HTML test.</p>\n' +
   		'		<p>Row 12: This is an HTML test.</p>\n' +
   		'		<p>Row 13: This is an HTML test.</p>\n' +
   		'		<p>Row 14: This is an HTML test.</p>\n' +
   		'		<p>Row 15: This is an HTML test.</p>\n' +
   		'		<p>Row 16: This is an HTML test.</p>\n' +
   		'		<p>Row 17: This is an HTML test.</p>\n' +
   		'		<p>Row 18: This is an HTML test.</p>\n' +
   		'		<p>Row 19: This is an HTML test.</p>\n' +
   		'		<p>Row 20: This is an HTML test.</p>\n' +
   		'		<p>Row 21: This is an HTML test.</p>\n' +
   		'		<p>Row 22: This is an HTML test.</p>\n' +
   		'		<p>Row 23: This is an HTML test.</p>\n' +
   		'		<p>Row 24: This is an HTML test.</p>\n' +
   		'		<p>Row 25: This is an HTML test.</p>\n' +
   		'		<p>Row 26: This is an HTML test.</p>\n' +
   		'		<p>Row 27: This is an HTML test.</p>\n' +
   		'		<p>Row 28: This is an HTML test.</p>\n' +
   		'		<p>Row 29: This is an HTML test.</p>\n' +
   		'		<p>Row 30: This is an HTML test.</p>\n' +
   		'		<p>Row 31: This is an HTML test.</p>\n' +
   		'		<p>Row 32: This is an HTML test.</p>\n' +
   		'		<p>Row 33: This is an HTML test.</p>\n' +
   		'		<p>Row 34: This is an HTML test.</p>\n' +
   		'		<p>Row 35: This is an HTML test.</p>\n' +
   		'		<p>Row 36: This is an HTML test.</p>\n' +
   		'		<p>Row 37: This is an HTML test.</p>\n' +
   		'		<p>Row 38: This is an HTML test.</p>\n' +
   		'		<p>Row 39: This is an HTML test.</p>\n' +
   		'		<p>Row 40: This is an HTML test.</p>\n' +
   		'		<p>Row 41: This is an HTML test.</p>\n' +
   		'		<p>Row 42: This is an HTML test.</p>\n' +
   		'		<p>Row 43: This is an HTML test.</p>\n' +
   		'		<p>Row 44: This is an HTML test.</p>\n' +
   		'		<p>Row 45: This is an HTML test.</p>\n' +
   		'		<p>Row 46: This is an HTML test.</p>\n' +
   		'		<p>Row 47: This is an HTML test.</p>\n' +
   		'		<p>Row 48: This is an HTML test.</p>\n' +
   		'		<p>Row 49: This is an HTML test.</p>\n' +
   		'		<p>Row 50: This is an HTML test.</p>\n' +
   		'	</body>\n' +
   		'</html>\n';
   
   var windowSettings = {
   	extendSafeArea: true,
   //	fullscreen: true,
   };
   if (Ti.App.Android) {
   	windowSettings.theme = "Theme.AppCompat.NoTitleBar";
   	windowSettings.windowFlags |= Ti.UI.Android.FLAG_TRANSLUCENT_STATUS;
   	windowSettings.windowFlags |= Ti.UI.Android.FLAG_TRANSLUCENT_NAVIGATION;
   }
   var window = Ti.UI.createWindow(windowSettings);
   var webView = Ti.UI.createWebView({
   	html: htmlString,
   	width: Ti.UI.FILL,
   	height: Ti.UI.FILL,
   });
   window.add(webView);
   window.open();

By default, the WKWebView uses viewport-fit=contain, which will inset the web view's contents to avoid overlap. I took screenshots of the above code with the "contain" setting on iPhoneX and iPhone7. !iPhoneX-contain-portrait.png|thumbnail! !iPhoneX-contain-landscape.png|thumbnail! !iPhone7-contain-portrait.png|thumbnail! !iPhone7-contain-landscape.png|thumbnail! When I changed the code to use viewport-fit=cover, I see the following on iPhoneX and iPhone7. !iPhoneX-cover-portrait.png|thumbnail! !iPhoneX-cover-landscape.png|thumbnail! !iPhone7-cover-portrait.png|thumbnail! !iPhone7-cover-landscape.png|thumbnail! Note that Android does not support the viewport-fit=contain setting. So, if you're using a translucent status bar or navigation bar as shown in my above code, then they will always overlap the content.

Sharif AbuDarda 2019-05-16

Hello [~rpl], Can you follow up here? What's the status of your issue?
roeland p 2019-05-17

@sharif sorry for the non response, got buried in email. I've attached a barebones test project where I am using the Meta key viewport settings as instructed and extendSafeArea=true padding What you will notice is that (testing on iphone 8) the console logs are as followed: [INFO] Ti.Platform.displayCaps.platformHeight 667 [INFO] data = "from webview (onload)- window.innerHeight ---> 647 Inside the webview - onload, somehow reports window.innerHeight = 647. (so minus statusbar height) BUT, when i change the window to "fullscreen = true" the window.innerHeight is reporting the correct behaviour. So either I am not understanding window.innerHeight or something is off. The webview seems to be running from top to bottom of screen tho. [^wkwebviewtest.zip]
roeland p 2019-05-17

more testing and digging into this behaviour. When using the screen.height property it reports the correct number. So i'm still not sure if window.innerHeight is intended to return a different value (w/o safeAreapadding) but the webview itself uses the full height including the safeAreapadding area :) for now I will detect if my webview is on IOS and use the screen.height property for properly scaling some divs. Thanks all for helping with this. I hope my comments are still valuable. kr roeland
Rakhi Mitro 2019-06-26

[~rpl], Thanks for your valuable comment. We appreciate it. Are you able to get that sorted out? Please let us know if you need more help with this issue.
Rakhi Mitro 2019-07-25

Hello, We have not heard back from you since our last update. I just wanted to follow up with you about this issue? Are you still experiencing this problem? Please let us know if you need more help with this issue.
Rakhi Mitro 2019-08-18

[~rpl], I just wanted to follow up and check the status of your issue. We have not heard back from you since our last update.Did you manage to resolve the problem? Let us know the update.

JSON Source