search

apache / cordova-plugin-statusbar

Apache Cordova Status Bar Plugin
https://cordova.apache.org/
Apache License 2.0
619 stars 482 forks source link

Android top and bottom content overlapped by status bar after upgrade from 2.4.3 to 3.0.0 #260

Open tudordumitriu opened 1 year ago

tudordumitriu commented 1 year ago

Bug Report

After upgrading our plugin version from 2.4.3 to 3.3.0 the top and bottom are overlapped by the status bar. Actually it looks like the entire viewport is bigger (taller)

Information

It works just fine (same plugins and settings) if we keep using 2.4.3

Environment, Platform, Device and Version information

Cordova: Cordova Android 11.0.0 Cordova CLI 11.1.0 Windows 10 Android Studio Dolphin | 2021.3.1 Patch Android 13

breautek commented 1 year ago

plugin version from 2.4.3 to 3.3.0

I'm assuming you mean 3.0.0, as 3.3.0 doesn't exist.

Are you using the StatusBarOverlaysWebView preference?

While Android always supported the overlay statusbar, it never obeyed the preference like iOS did until https://github.com/apache/cordova-plugin-statusbar/pull/171 which was included in v3.0.0

If the preference is enabled, then the status bar overlays on top of the webview, so the behaviour would be intended.

tudordumitriu commented 1 year ago

Hi @breautek Sorry about the version indeed 3.0.0 Now, related to this setting we are using (even though we are using 2.4.3 - so there must be a misusage on our side) but still, even when upgrading to 3.0.0 that preference was kept as false and the results were the ones described. Are we missing something? Tudor

breautek commented 1 year ago

even when upgrading to 3.0.0 that preference was kept as false and the results were the ones described. Are we missing something?

Doesn't sound like it. Are you able to reproduce the issue with a sample reproduction app? If so, if you could provide a sample app along with maybe a screenshot of expected vs actual behaviour just so that we have a clear understanding on your expectations. The sample app can serve so I can make sure I replicate your settings and will also eliminate possible interference of frameworks or other plugins.

nicholaszuccarelli commented 1 year ago

Had the same issue after upgrading the v3. Fixed the problem by setting <preference name="StatusBarOverlaysWebView" value="true" /> for iOS and <preference name="StatusBarOverlaysWebView" value="false" /> for Android

danicarla commented 1 year ago

Hi guys.. In my case this setting is hiding the top and bottom bar, how do I make them visible?

meishier commented 1 year ago

use Gesture Navigation, The same kind of thing happened on ver: 4.0.0

Mehuge commented 1 year ago

I am seeing this issue, also seeing it with a basic project:

cordova create hello com.hello.world Hello
cd hello
# Add divs to body to highlight the problem (see note below)
ed www/index.html <<EOF
/<body>

i
<div style="position: absolute; bottom: 0; right: 0; 
  background-color: yellow; height: 25px; width: 10px"></div>
<div style="position: absolute; top: 0; right: 0; 
  background-color: yellow; height: 25px; width: 10px"></div>
<div style="position: absolute; top: 0; 
  background-color: yellow; height: 25px; width: 10px"></div>
<div style="position: absolute; bottom: 0; 
  background-color: yellow; height: 25px; width: 10px">
</div>
.
w
q
EOF
cordova plugin add cordova-plugin-statusbar
cordova platform add android
cordova build android --debug -- --packageType=apk
adb install platforms/android/app/build/outputs/apk/debug/app-debug.apk
adb shell start am com.hello.world/.MainActivity

config.xml does not contain any statusbar settings, its the default config.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.hello.world" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>

Note: When run, the 4 corner blocks (divs) that are 25px tall will show just 1px, with 24px being clipped vertically (top and bottom).

image

As per https://github.com/apache/cordova-plugin-statusbar/issues/260#issuecomment-1620926421 if I add <preference name="StatusBarOverlaysWebView" value="false" /> for android, the webview displays correctly.

image
champikamendis commented 6 months ago

Had the same issue after upgrading the v3. Fixed the problem by setting <preference name="StatusBarOverlaysWebView" value="true" /> for iOS and <preference name="StatusBarOverlaysWebView" value="false" /> for Android

This works fine for me. Thanks

michaelmontero commented 6 months ago

Had the same issue after upgrading the v3. Fixed the problem by setting <preference name="StatusBarOverlaysWebView" value="true" /> for iOS and <preference name="StatusBarOverlaysWebView" value="false" /> for Android

that worked for me as well!

hthetiot commented 3 months ago

Quick update using platform cordova-android@13 and cordova-plugin-statusbar@4 I had to actually use <preference name="StatusBarOverlaysWebView" value="false" /> on android to avoid the trunked top and bottom.

erophames commented 1 week ago

I'm seeing a similar issue and it doesn't seem like setting the value to false has any effect.

image