Your content goes here.
\r\n\t\r\n\r\n{code}\r\n\r\nThe 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.\r\n", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-04-29T23:40:43.000+0000", "updated": "2019-04-29T23:40:43.000+0000" }, { "id": "448064", "author": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "@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. \r\n\r\nIt 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). ", "updateAuthor": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2019-04-30T09:11:29.000+0000", "updated": "2019-04-30T09:15:06.000+0000" }, { "id": "448067", "author": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "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. ", "updateAuthor": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2019-04-30T12:27:53.000+0000", "updated": "2019-04-30T12:27:53.000+0000" }, { "id": "448090", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-04-30T18:25:17.000+0000", "updated": "2019-04-30T18:25:17.000+0000" }, { "id": "448105", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I've tested this with the following code.\r\n{code:javascript}\r\nvar htmlString =\r\n\t\t'\\n' +\r\n\t\t'\\n' +\r\n\t\t'\t\\n' +\r\n//\t\t'\t\t\\n' +\r\n//\t\t'\t\t\\n' +\r\n\t\t'\t\t\\n' +\r\n\t\t'\t\t\\n' +\r\n\t\t'\t\\n' +\r\n\t\t'\t\\n' +\r\n\t\t'\t\tRow 01: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 02: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 03: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 04: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 05: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 06: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 07: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 08: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 09: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 10: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 11: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 12: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 13: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 14: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 15: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 16: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 17: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 18: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 19: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 20: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 21: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 22: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 23: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 24: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 25: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 26: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 27: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 28: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 29: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 30: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 31: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 32: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 33: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 34: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 35: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 36: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 37: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 38: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 39: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 40: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 41: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 42: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 43: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 44: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 45: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 46: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 47: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 48: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 49: This is an HTML test.
\\n' +\r\n\t\t'\t\tRow 50: This is an HTML test.
\\n' +\r\n\t\t'\t\\n' +\r\n\t\t'\\n';\r\n\r\nvar windowSettings = {\r\n\textendSafeArea: true,\r\n//\tfullscreen: true,\r\n};\r\nif (Ti.App.Android) {\r\n\twindowSettings.theme = \"Theme.AppCompat.NoTitleBar\";\r\n\twindowSettings.windowFlags |= Ti.UI.Android.FLAG_TRANSLUCENT_STATUS;\r\n\twindowSettings.windowFlags |= Ti.UI.Android.FLAG_TRANSLUCENT_NAVIGATION;\r\n}\r\nvar window = Ti.UI.createWindow(windowSettings);\r\nvar webView = Ti.UI.createWebView({\r\n\thtml: htmlString,\r\n\twidth: Ti.UI.FILL,\r\n\theight: Ti.UI.FILL,\r\n});\r\nwindow.add(webView);\r\nwindow.open();\r\n{code}\r\n\r\nBy 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.\r\n !iPhoneX-contain-portrait.png|thumbnail! !iPhoneX-contain-landscape.png|thumbnail! \r\n !iPhone7-contain-portrait.png|thumbnail! !iPhone7-contain-landscape.png|thumbnail! \r\n\r\nWhen I changed the code to use {{viewport-fit=cover}}, I see the following on iPhoneX and iPhone7.\r\n !iPhoneX-cover-portrait.png|thumbnail! !iPhoneX-cover-landscape.png|thumbnail! \r\n !iPhone7-cover-portrait.png|thumbnail! !iPhone7-cover-landscape.png|thumbnail! \r\n\r\nNote 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.", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2019-05-01T02:27:25.000+0000", "updated": "2019-05-01T02:27:25.000+0000" }, { "id": "448456", "author": { "name": "sdarda", "key": "sdarda", "displayName": "Sharif AbuDarda", "active": false, "timeZone": "Asia/Dhaka" }, "body": "Hello [~rpl], Can you follow up here? What's the status of your issue? ", "updateAuthor": { "name": "sdarda", "key": "sdarda", "displayName": "Sharif AbuDarda", "active": false, "timeZone": "Asia/Dhaka" }, "created": "2019-05-16T23:03:39.000+0000", "updated": "2019-08-19T22:10:22.000+0000" }, { "id": "448466", "author": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "@sharif sorry for the non response, got buried in email. \r\n\r\nI've attached a barebones test project where I am using the Meta key viewport settings as instructed and extendSafeArea=true padding \r\n\r\nWhat you will notice is that (testing on iphone 8) the console logs are as followed: \r\n\r\n[INFO] \b\b \b Ti.Platform.displayCaps.platformHeight 667\r\n[INFO] \b\b \b data = \"from webview (onload)- window.innerHeight ---> 647\r\n\r\nInside the webview - onload, somehow reports window.innerHeight = 647. (so minus statusbar height)\r\n\r\nBUT, when i change the window to \"fullscreen = true\" the window.innerHeight is reporting the correct behaviour. \r\nSo either I am not understanding window.innerHeight or something is off. The webview seems to be running from top to bottom of screen tho. \r\n\r\n[^wkwebviewtest.zip] ", "updateAuthor": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2019-05-17T08:20:00.000+0000", "updated": "2019-05-17T08:20:37.000+0000" }, { "id": "448468", "author": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "body": "more testing and digging into this behaviour.\r\n\r\nWhen 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 :) \r\n\r\nfor now I will detect if my webview is on IOS and use the screen.height property for properly scaling some divs. \r\n\r\nThanks all for helping with this. I hope my comments are still valuable. \r\n\r\nkr roeland", "updateAuthor": { "name": "rpl", "key": "rpl", "displayName": "roeland p", "active": true, "timeZone": "Europe/Amsterdam" }, "created": "2019-05-17T09:41:51.000+0000", "updated": "2019-05-17T09:41:51.000+0000" }, { "id": "449364", "author": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "body": "[~rpl],\r\nThanks 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.\r\n\r\n", "updateAuthor": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-06-26T11:20:41.000+0000", "updated": "2019-06-26T11:20:41.000+0000" }, { "id": "450054", "author": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Hello,\r\nWe 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?\r\nPlease let us know if you need more help with this issue.", "updateAuthor": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-07-25T09:39:35.000+0000", "updated": "2019-07-25T09:39:35.000+0000" }, { "id": "450553", "author": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "body": "[~rpl],\r\nI 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.", "updateAuthor": { "name": "rmitro", "key": "rmitro", "displayName": "Rakhi Mitro", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2019-08-18T10:30:58.000+0000", "updated": "2019-08-18T10:30:58.000+0000" } ], "maxResults": 12, "total": 12, "startAt": 0 } } }