[
https://issues.apache.org/jira/browse/CB-13956?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17076268#comment-17076268
]
Pranav commented on CB-13956:
-----------------------------
*Change CDVInAppBrowserNavigationController.m*
statusBarFrame.size.height = *0;*
set this in viewDidLoad
*Change in CDVWKInAppBrowser.m*
declare somwhere before close method
float orgHeight = 0;
float orgWidth = 0;
*add these 2 methods before viewWillAppear*
- (BOOL)hasTopNotch { // method returns true if notch is at top
if (@available(iOS 11.0, *)) {
if([[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.top>20.0){
return YES;
}
}
return NO;
}
- (BOOL)hasLeftOrRightNotch { //method returns true if notch is at left or
right side
if (@available(iOS 11.0, *)) {
if([[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.left>20.0){
return YES;
}
if([[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.right>20.0){
return YES;
}
}
return NO;
}
*Modify ViewWillAppear to*
- (void)viewWillAppear:(BOOL)animated
{
if (IsAtLeastiOSVersion(@"7.0") && !viewRenderedAtLeastOnce) { // set origin
based on notch and safe area
viewRenderedAtLeastOnce = TRUE;
CGRect viewBounds = [self.webView bounds];
if ([self hasTopNotch]) {
float topSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.top;
viewBounds.origin.y = topSafeArea;
} else if ([self hasLeftOrRightNotch]) {
float leftSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.left;
viewBounds.origin.x = leftSafeArea;
} else {
viewBounds.origin.y = STATUSBAR_HEIGHT;
viewBounds.size.height = viewBounds.size.height - STATUSBAR_HEIGHT;
}
self.webView.frame = viewBounds;
[[UIApplication sharedApplication] setStatusBarStyle:[self
preferredStatusBarStyle]];
}
[self rePositionViews];
[super viewWillAppear:animated];
}
*Modify supportedInterfaceOrientations method to -*
- (NSUInteger)supportedInterfaceOrientations
{
if ((self.orientationDelegate != nil) && [self.orientationDelegate
respondsToSelector:@selector(supportedInterfaceOrientations)]) {
CGRect viewBounds = [self.webView bounds];
if (orgWidth == 0 && orgHeight == 0) { //set height and width on launch
if ([self hasTopNotch]) { //when app is launched in portrait mode, set hight
excluding safe area
float topSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.top;
orgHeight = viewBounds.size.height - (topSafeArea);
orgWidth = viewBounds.size.width;
} else { //when app is launched in landscape mode, set width excluding safe
area
float leftSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.left;
orgHeight = viewBounds.size.height;
orgWidth = viewBounds.size.width - (2*leftSafeArea);
}
} else if ([self hasTopNotch] && viewRenderedAtLeastOnce) { //on oritentation
change, swap dimensions assuming safe area
float topSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.top;
viewBounds.origin.y = topSafeArea;
if(viewBounds.size.height == orgWidth) { //this block is when landscape to
portrait is changed
viewBounds.size.height = orgWidth;
viewBounds.size.width = orgHeight;
} else {
viewBounds.size.height = orgHeight;
viewBounds.size.width = orgWidth;
}
} else if ([self hasLeftOrRightNotch] && viewRenderedAtLeastOnce) {
float leftSafeArea = [[[UIApplication sharedApplication] delegate]
window].safeAreaInsets.left;
viewBounds.origin.x = leftSafeArea;
if(viewBounds.size.width == orgHeight) { //this block is when portrait to
landscape is changed
viewBounds.size.height = orgWidth;
viewBounds.size.width = orgHeight;
} else { // special case of oritention change from portrait to landscaoe both
left and right direction
viewBounds.size.width = orgHeight - leftSafeArea;
viewBounds.size.height = orgWidth;
}
} else { //for non notched devices
viewBounds.origin.y = STATUSBAR_HEIGHT;
viewBounds.size.height = orgHeight;
}
self.webView.frame = viewBounds;
[self rePositionViews];
return [self.orientationDelegate supportedInterfaceOrientations];
}
return 1 << UIInterfaceOrientationPortrait;
}
*That's it. It resizes your IAB based on notch. :)*
> 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
> 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 [email protected]
> 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
(v8.3.4#803005)
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
