Jacob Weber created CB-13956: -------------------------------- Summary: InAppBrowser safe-area-inset margins wrong on iPhone X Key: CB-13956 URL: https://issues.apache.org/jira/browse/CB-13956 Project: Apache Cordova Issue Type: Bug Components: cordova-ios, cordova-plugin-inappbrowser Affects Versions: cordova-ios 4.5.0 Environment: Mac OS 10.13.3, cordova-cli 8.0.0, node 8.9.4 Reporter: Jacob Weber Assignee: Suraj Pindoria Attachments: 1. portrait.png, 2. landscape.png, 3. portrait.png, CordovaTest.zip
The in-app browser doesn't use the correct margins on an iPhone X, if you try to use {{viewport-fit=cover}} along with the {{safe-area-inset-*}} constants. To reproduce: {code:java} cordova create CordovaTest com.sample.cordovatest CordovaTest cd CordovaTest cordova platform add ios@4.5.4 cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-statusbar{code} Then to make it work on the iPhone X, create a 2732x2732 image and add it to config.xml: {code:java} <splash src="res/screen/ios/Default@2x~universal~anyany.png" />{code} and add {{viewport-fit=cover}} to the {{viewport}} tag of {{www/index.html}}. Finally, create an HTML page to load in the in-app browser, and store it on some web server: {code:java} <html> <head> <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover" /> <style> html { background-color: #00FFFF; } body { border: 1px solid red; margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom); margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); } </style> </head> <body> </body> </html> {code} Now launch this on an iPhone X simulator running iOS 11.2, attach a Safari debugger, and open the page in an in-app browser, e.g. {{window.open("https://myserver.com/test.html", "_blank");}} The attachments show what you'll see. # Starting in portrait, the borders look correct. # Rotate to landscape, and the left/right safe-area margins aren't applied. # Rotate back to portrait, and now things are different. The left/right sides have safe-area margins when they shouldn't, and the top doesn't have one when it should. If you load the same page directly in Safari, it behaves as expected. -- This message was sent by Atlassian JIRA (v7.6.3#76005) --------------------------------------------------------------------- To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org For additional commands, e-mail: issues-h...@cordova.apache.org