apache / apache/cordova-plugin-inappbrowser
iOS Location bar is transparent
- Dominant language
- Java
- Stars
- 1.1k
- Forks
- 2.2k
- PR merge metrics
- No merged PRs in 30d
Description
# Bug Report
## Problem
On iOS, the location bar is transparent, meaning the app is visible behind.
### What is expected to happen?
The location bar has the same background color as the toolbar, hiding the app behind and making the visited URL visible.
### What does actually happen?
The location bar is transparent.

The green rectangle shows the location bar. It's transparent, and as the background of the app is white, just like the location, the location isn't visible.
Changing `toolbarcolor` or `toolbartranslucent` doesn't have any effect on the location
## Information
I don't know if this is linked with https://github.com/apache/cordova-plugin-inappbrowser/issues/801 as it's reported to be caused by the notch. I've tested it on real devices with notch, as well as in the simulator on an iPhone 8 that has no notch, and I always have the issue.
Looking at the code it seems normal that this issue occurs, as the label has a [transparent background](https://github.com/apache/cordova-plugin-inappbrowser/blob/3b6757fc4407aa5cd9d5cbda3ff2f8174ecdae1a/src/ios/CDVWKInAppBrowser.m#L858) color.
Doing the following fixes my issue mostly
```
self.addressLabel.backgroundColor = [UIColor blackColor];
```
This only mostly fixes the issue because
- Instead of `blackColor` it would be best to be able to reuse the color of the toolbar. Setting it to `self.toolbar.barTintColor` works, but only if a `toolbarcolor` option was used.
- There's still a small space on the left of the label, corresponding to the [label inset](https://github.com/apache/cordova-plugin-inappbrowser/blob/3b6757fc4407aa5cd9d5cbda3ff2f8174ecdae1a/src/ios/CDVWKInAppBrowser.m#L850). It would be best to be able to remove that inset while still having some padding.
### Command or Code
```
cordova.InAppBrowser.open('https://github.com', '_blank', 'location=yes,closebuttoncaption=Fermer');
```
### Environment, Platform, Device
```
System:
ios-deploy : 1.11.3
ios-sim : 8.0.2
NodeJS : v14.15.4 (/Users/user/.nvm/versions/node/v14.15.4/bin/node)
npm : 6.14.10
OS : macOS Big Sur
Xcode : Xcode 12.3 Build version 12C33
```
### Version information
```
Ionic:
Ionic CLI : 6.13.1 (/Users/user/.nvm/versions/node/v14.15.4/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.3
@angular-devkit/build-angular : 0.1102.5
@angular-devkit/schematics : 11.2.5
@angular/cli : 11.2.5
@ionic/angular-toolkit : 3.1.1
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 17 other plugins)
cordova-plugin-inappbrowser 5.0.0
Utility:
cordova-res : 0.15.3
native-run : 1.3.0
```
## Checklist
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
Contributor guide
Research direction
Start in src/ios/CDVWKInAppBrowser.m around the addressLabel background color and label inset references at lines 850 and 858. Reproduce the issue with the provided cordova.InAppBrowser.open command on iOS, then compare the location bar with the toolbar. Done means the location bar background matches the toolbar and the unwanted left gap is addressed without losing useful padding.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, objective-c
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100