[ https://issues.apache.org/jira/browse/CB-13956?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Jacob Weber updated CB-13956: ----------------------------- Attachment: CordovaTest.zip > 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 > Priority: Major > 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 as > {{www/sample.html}}: > {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("sample.html", "_blank");}} > (In the attached app, you can just tap the Cordova icon to open it.) > 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. > The gray status-bar overlay gets in the way of seeing exactly what's > happening; see CB-13583. -- 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