apache / apache/cordova-plugin-inappbrowser

InAppBrowser 5.0.0 BUG - Does Not Display Correctly in iOS - location bar transparent and safe-area-inset not respected

Open
#901 3 comments 6 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
1.1k
Forks
2.2k
PR merge metrics
No merged PRs in 30d

Description

# InAppBrowser 5.0.0 BUG - Does Not Display Correctly in iOS - location bar transparent and safe-area-inset not respected

*** EXAMPLE APP PROVIDED TO REPLICATE ISSUE IN 15 SECONDS
https://github.com/codeconsole/inappbrowsertest

## Problem

### What is expected to happen?
toolbarcolor and toolbartranslucent should either set location bar properties or new properties should be added to prevent the location bar from being transparent.

This is how viewing a webpage looks in Safari and how it should work
![Portrait](https://raw.githubusercontent.com/codeconsole/inappbrowsertest/main/screenshots/safari-portrait.jpg)
![Portrait](https://raw.githubusercontent.com/codeconsole/inappbrowsertest/main/screenshots/safari-landscape.jpg)

### What does actually happen?
location bar is transparent and not readable and can not e set
Portrait Orientaion does not respect safe-area-inset-top and safe-area-inset-bottom
![Portrait](https://raw.githubusercontent.com/codeconsole/inappbrowsertest/main/screenshots/ios-layout.jpg)
Landscape Orientaion does not respect safe-area-inset-left and safe-area-inset-right
![Landscape](https://raw.githubusercontent.com/codeconsole/inappbrowsertest/main/screenshots/landscape.jpg)

## Information
https://github.com/codeconsole/inappbrowsertest

### Command or Code
```
git clone https://github.com/codeconsole/inappbrowsertest
cd inappbrowsertest
cordova prepare
cordova run ios
```

### Environment, Platform, Device
```
% xcrun xctrace list devices|grep '12 Pro Max'
iPhone 12 Pro Max (14.5) (E6A9885C-F212-45C4-9FC3-09B5BD9DB82B)
```

### Version information
```
% cordova -v
10.0.0
```
```
% cordova plugin ls
cordova-plugin-inappbrowser 5.0.0 "InAppBrowser"
cordova-plugin-whitelist 1.3.5 "Whitelist"
```
```
% cordova platform ls
Installed platforms:
ios 6.2.0
Available platforms:
android ^9.0.0
browser ^6.0.0
electron ^1.0.0
osx ^6.0.0
```

Contributor guide

Open the contributing guide

Research direction

Clone the linked inappbrowsertest example and run `cordova prepare` followed by `cordova run ios` on the stated iPhone 12 Pro Max setup. Then inspect the plugin's iOS implementation for location-bar styling and safe-area handling in portrait and landscape. Done means the location bar is readable and the top, bottom, left, and right safe-area insets are respected.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.