The Android status bar (that is, the small bar on top of the screen that shows the current time, the batter status, and notification icons) is really, really weird.
It turns out, Capacitor will, by default, make your app a “fullscreen” app: It’ll render your MainActivity (the one that hosts the WebView which in turn hosts your web app) in such a way that the status bar isn’t there at all–on most devices. On some devices, however, the status bar will be visible, but transparently overlay your app š¤ØAnd, to add insult to injury: It’ll change the font color of the status bar to white, so that if you rapp comes with a white background, all the user sees are some weird optical artifacts at the top of their screen.
Desperately trying to work around this, I’ve even added an artificial margin “inside” my app to push the content of poketto.me down below the status bar. Turns out, that’ll only work on about half of the devices I’m testing on. On the other half? That extra margin pushes down the content too far, adding a second “empty” bar between the status bar and the app.
After backtracking several steps, I’ve discovered the status-bar plugin for Capacitor, which, in theory, allows you to set the status bar to never overlay “your” WebView. In practice? Not so much. Even after tinkering with that and the windowOptOutEdgeToEdgeEnforcement property the most workable solution I found still overlays the WebView on some devices. At least, I got the status bar text color fixed š
Needless to say, if anyone encountered this before and has a solution, please give me a shout out!