bug: Navigation bar overlaps app screen

[rbalet]

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.5.0
  @capacitor/android: 4.6.2
  @capacitor/ios: 4.4.0

Installed Dependencies:

  @capacitor/cli: 4.7.0
  @capacitor/core: 4.7.0
  @capacitor/android: 4.7.0
  @capacitor/ios: 4.7.0

[success] Android looking great! 👌
[error] Xcode is not installed

Platform(s)

Android 13

Current Behavior

Navigation bar overlaps app screen

Expected Behavior

Not overlapping it

Code Reproduction

The error only happen in production, here for a working example

Code Reproduction : https://github.com/rbalet/ionic-navigation-bar-overlaps

see the add - Code reproduction branch to see which code have been added

Other Technical Details

npm --version output: 9.6.2

node --version output: 18.15.0

Additional Context

• It does not happen all the time
• I didn't had this error before updating to Android 13, so seems to be related to this version
• StatusBar.setOverlaysWebView({ overlay: false }) seems to fix this problem
• The following also seems to help (Will update if I get any news)

  private _setStatusBar() {
    if (Capacitor.getPlatform() === 'android') {
      setTimeout(() => {
        StatusBar.setOverlaysWebView({ overlay: true })
        StatusBar.setBackgroundColor({ color: '#00000000' })
      }, 100)
    }
  }