InApp browser not support in iPhone X devices about cordova-plugin-inappbrowser

[dmonaldo]

I'm also experiencing this issue. Are there any plans to fix this?

[chrisetler]

I found a solution but it only works with the toolbar positioned at the bottom.

It works by not hardcoding the height of the "blur" UItoolbar added behind the status bar to 20 and instead getting the value from the device, and by keeping a reference to the toolbar so that when the device orientation changes we can detect if the toolbar was hidden (as it is on the iPhone X) and hide our blur accordingly.

In CordovaInAppBrowser.h add the following to the CDVInAppBrowserNavigationController interface:

    @private
    UIToolbar* bgToolbar;

In CordovaInAppBrowser.m in viewDidLoad use this:

- (void) viewDidLoad {
 
    CGRect statusBarFrame = [self invertFrameIfNeeded:[UIApplication sharedApplication].statusBarFrame];

//don't hardcode the height
//    statusBarFrame.size.height =  STATUSBAR_HEIGHT;
    
    
    // simplified from: http://stackoverflow.com/a/25669695/219684
    bgToolbar = [[UIToolbar alloc] initWithFrame:statusBarFrame];
    bgToolbar.barStyle = UIBarStyleDefault;
    [bgToolbar setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
    [self.view addSubview:bgToolbar];
    
    //set the statusbar height    
    [self fixStatusBar];
    
    [super viewDidLoad];
}

Directly below the viewDidLoad method add this:

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    [coordinator animateAlongsideTransition:nil completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
        // fix height after orientation change
         [self fixStatusBar];
    }];
}

-(void)fixStatusBar {
    CGRect statusBarFrame = [self invertFrameIfNeeded:[UIApplication sharedApplication].statusBarFrame];
    if([UIApplication sharedApplication].isStatusBarHidden) {
        statusBarFrame.size.height = 0;
    }
    
    [bgToolbar setFrame:statusBarFrame];


    
}

[ersatishverma]

Hi @noahcooper
Yes, manually edit Objective-C files not a good solution.

I switched to another plugin for ios devices
https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller
and it's working for me.

[alexyazvinsky]

Any update?

[vagishmm]

1. For this issue add iPhone X splash images in Images.xcassets. Automatically it will fix your UI issue.
   Please use below sizes for iPhone X

Device | Portrait size | Landscape size
iPhone XS Max | 1242px × 2688px | 2688px × 1242px
iPhone XS | 1125px × 2436px | 2436px × 1125px
iPhone XR | 828px × 1792px | 1792px × 828px
iPhone X | 1125px × 2436px | 2436px × 1125px

2. For Bottom URL please use this options.
   location=no,toolbar=no,hardwareback=no

[ersatishverma]

Hi vagishmm
Thanks for reply

Have made changes that you have suggested.
The bottom URL problem resolved, many thanks.
But the status bar problem remains the same.

[vespino]

@ersatishverma were you able fix this issue? Using the other splash images doesn't help, because those are not yet supported by Phonegap.

[ersatishverma]

Hi @vespino
yes, these splash images doesn't help me too.
and my issue remains the same is not fix yet.

[vespino]

@ersatishverma I'm using this fork of themeable browser now: https://github.com/toontoet/cordova-plugin-themeablebrowser.git

[noahcooper]

Any update on this issue? Most of us don't want to manually edit Objective-C files. :)

[Sagarkhenat]

I am also facing this issue,will the cordova plugin team look into this,the InApp browser is not functioning correctly for iPhoneX probablye because of it's notch design.

[ersatishverma]

@Sagarkhenat
I switched to another plugin for ios devices you can use this one its support all iPhone notch designs.
https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller

[noahcooper]

+1 for cordova-plugin-safariviewcontroller. It is a much better experience on iOS.

[de-dan]

The safariviewcontroller might be the better choice for the average user, but unfortunately not in my case: the app is running/wrapped in a Citrix XenMobile environment, which currently supports only the UIWebView engine.

[clerkzhang]

Any update?

[thanveershah]

Any Update?

[vadimwe]

+++++

[NiklasMerz]

Please check this issue about the removal of the "fake" statusbar #604

[jcesarmobile]

closing as duplicate of #301