search

ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

iOS Statusbar overlaps InAppBrowser #715

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @natalieG96 on 2018-10-17T12:34:43Z

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.13
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 4 other plugins)

Describe the Bug I am loading a website with the InAppBrowser. The iOS statusbar is overlapping the InAppBrowser respectively the InAppBrowser is behind the statusbar. Theres missing some padding.

Steps to Reproduce Steps to reproduce the behavior:

  1. Create an ionic app
  2. Load a website inside InAppBrowser
  3. cmd: ionic cordova prepare ios
  4. Start ios file with XCode on mac

Related Code At home.page.ts

 options: InAppBrowserOptions = {
    location: 'no',//Or 'no' 
    zoom: 'no',//Android only ,shows browser zoom controls 
    toolbar:'no',
    hidespinner:'yes'
  };

  constructor(private inApp: InAppBrowser, private statusBar: StatusBar) {
    let browser = this.inApp.create('some URL', '_self',this.options);
  }

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Some name</name>
    <description>desc</description>
    <author>author</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="*" />
        <allow-intent href="itms-apps:*" />
        <allow-navigation href="*" />
        <preference name="StatusBarOverlaysWebView" value="false" />
        <preference name="StatusBarStyle" value="default" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="7.0.0" />
</widget>

Expected Behavior Statusbar should have its own place. No overlapping

Additional Context iosapp

doggard commented 5 years ago

Was there a resolution to this issue? I'm experiencing the exact same issue.

huahuichin commented 5 years ago

Was there a resolution to this issue? I'm experiencing the exact same issue.

hanoj-budime commented 4 years ago

what is the solution for this

doggard commented 4 years ago

@HanojHanu I managed to fix this in our project by altering the file CDVInAppBrowserNavigationController.m. I am not an objective C developer and so I can not recommend my change, but it worked for me. I will quote myself from my own project's issue regarding this problem. Your folder structure may differ. Quote:

I have identified the plugin file that controls the inappbrowser, it is located here plugins/cordova-plugin-inappbrowser/src/ios/CDVInAppBrowserNavigationController.m In this file there is a property specified for the statusbar height; statusBarFrame.size.height = STATUSBAR_HEIGHT; (line 35). I manually added a property for width; statusBarFrame.size.width = 1366; and this seemed to resolve the issue of the statusbar not covering the content. Essentially it draws a rectangle to make a background for the statusbar.

Hopefully this helps.