I’ve run into a strange issue when viewing the HabPanel from mobile. Namely, when viewed, the chrome view constantly jumps up and down, making the interface extremely frustrating to view.
Some of my setup details:
Openhab 2.5.12 with HabPanel
Android 11 on a Pixel 5
I have the HabPanel website configured as a direct chrome link by using the “add to homepage” feature that Chrome has. This means that it launches into fullscreen mode, and on all other Android devices, works like a charm.
The Problem:
When viewing any HabPanel page, the whole interface jumps up and down about once every second or so. Here are two screenshots, taken half a second apart:
These two states rapidly swap with eachother, hiding and then revealing the hamburger menu button and the settings button behind the status bar.
What I think is wrong:
After a long think, and wondering why this doesn’t happen on all the other Android devices I’m running this exact same HabPanel on, I came to the conclusion that this probably has something to do with the Google Pixel 5’s “hole-punch” selfie camera in the upper left hand corner of the screen. My theory is that some part of the OS detects that the camera hole is making the hamburger menu button unreachable, so in some fit of accessibility, the phone decides to shift the entire screen contents down (the gesture home button slides down too) to make it tappable.
How I tried to fix it:
After coming up with this theory, I decided to disable the hamburger menu and the settings gear bar entirely by launching this specific instance into “kiosk mode” with ?kiosk=on, and while this hid the bar just fine, the weird up and down shifting still happens, presumably because the “Home Status” button–a clickable element–is still obscured by the camera punchout.
How I think this can be fixed:
My (amateur) speculation is that there’s something funky in the way that HabPanel’s code auto-activates full-screen when it’s launched in chrome after being added to the Home screen like a progressive web app. In general, I see a couple potential avenues of solving this problem:
- Modify HabPanel’s code somehow to fix the fullscreen implementation (I have no clue how to do this)
- Change some setting in Android or Chrome that prevents this “peeking” behavior (I wasn’t able to find any such convenient setting)
- Hard-code some CSS padding above the top of the dashboard so that android is tricked into thinking that it’s not obscuring anything with the camera punchout (Not sure if this will actually fix the problem)
Any ideas?