cordova-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Pranav (Jira)" <j...@apache.org>
Subject [jira] [Comment Edited] (CB-13956) InAppBrowser safe-area-inset margins wrong on iPhone X
Date Mon, 06 Apr 2020 11:51:00 GMT

    [ https://issues.apache.org/jira/browse/CB-13956?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17076268#comment-17076268
] 

Pranav edited comment on CB-13956 at 4/6/20, 11:50 AM:
-------------------------------------------------------

*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*

{color:#FF0000}*BOOLETS are actually a '-' minus symbol, Jira is auto replacing*{color}

(BOOL)hasTopNotch { // method returns true if notch is at top
 if (@available(iOS 11.0, *))
Unknown macro: \{ 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)
Unknown macro: \{ //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)
Unknown macro: \{ //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)
Unknown macro: \{ 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. :)*


was (Author: sarda):
*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 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
(v8.3.4#803005)

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org


Mime
View raw message