Bottom menu can't be clicked (greyed out by overlay of phone native bottom menu?)
Please provide the following details:
-
Mobile App OS (Android/iOS) and version: Android
-
Device model: Xiaomi Poco F6
-
HumHub version: 1.17.1
-
“Push Notifications” module version: 2.1.4 (shouldn't be relevant though)
-
Configuration done (see documentation)? Yes (shouldn't be relevant though)
-
Full steps / Screenshots to reproduce the issue:
Not really reproduction, but that's the screenshot of the issue:It looks like the native phone bottom bar is overlaid over the bottom menu.
-
App logs:
Navigate to:Administration -> Modules -> “Push Notifications” -> Configure -> “Mobile App Debug” (at the bottom) -> “Open native console” -> top right menu -> Copy all logs
not relevant
Additional context:
Another user has the same phone and no issue.
Tried: Removing application and re-install didn't solve it.
@MTrost The issue is with the Clean Theme module with your Android version which adds a translucent block at the bottom of the screen on top of the app. But I have to reproduce it and check if it's not also an issue with other themes for the bottom of the pages. I'll check that in a week or 2.
@marc-farre Thanks for the quick reply!
If it's an Android version problem, could the user upgrade Android version and it would fix it?
Hey @MTrost, thanks for your support regarding the issue. I’ve opened a PR with a fix and will notify you when the new version is ready for download.
It just happened with me. I just update my device to Android 15 and UI 7
Found the problem. With the update of Flutter from 3.24.0 to 3.27.0, there was also an upgrade from targetSdkVersion 34 to targetSdkVersion 35. The new target SDK has a bug. The PR is merged, but it will take some time before it is updated in the package that we use.
The targetSdkVersion 34 had fixed padding for the navigation bar. In Android, you have three settings for Navigation mode:
-
Gesture navigation
-
2-button navigation Same as Gesture navigation
-
3-button navigationNow,
with targetSdkVersion 35, the navigation bars have no padding and are displayed as overlays. This would not be a problem if the Chromium team had anticipated this and applied a fix for when the WebView is edge-to-edge. By default, Android's env(safe-area-inset-bottom) returns 0px.
PS: On iOS, everything works fine.
Solutions:
- Downgrade to targetSdkVersion 34 and wait for inAppWebView to support the new fix.
- Send the device's bottom safe-area padding from the mobile app to the web side, and apply it dynamically. This would require some JavaScript on the web side.
@PrimozRatej Thanks for your investigations. Bad luck this bug has been introduced, but it's good you manage to find it! Is it a problem/difficult to downgrade to targetSdkVersion 34?
I can downgrade it, not a big problem.
OK, so let's go for this solution, and keep this issue open until a new version is released with the fix.
On version v1.2.3 the problem still existed. On version v1.2.4, the bottom bar isn't translucent anymore, but the buttons of the clean theme are still behind of it, at least on Android 15.
@pegelf Thanks for your input! We’ve discovered that in some cases (depending on the theme), the issue still persists. We’re currently working on a solution that will address this problem across all use cases. I’ll keep you updated here as soon as we have a fix in place.
On version v1.2.4, the bottom bar isn't translucent anymore, but the buttons of the clean theme are still behind of it, at least on Android 15.
Can confirm, now this happens on my phone too (before it only happened on one user's phone).
I also tested gesture navigation, the menu is half hidden (clean theme)
@MTrost @FernandoHCFaria @pegelf can you test with:
- Mobile App v1.2.6: https://github.com/humhub/app/releases/tag/v1.2.6
- Clean Theme v1.2.6: https://marketplace.humhub.com/module/clean-theme/changelog
Thanks!
@MTrost @FernandoHCFaria @pegelf can you test with:
- Mobile App v1.2.6: https://github.com/humhub/app/releases/tag/v1.2.6
- Clean Theme v1.2.6: https://marketplace.humhub.com/module/clean-theme/changelog
Thanks!
@marc-farre It worked like a charm with v1.2.6. Thank you for the fix!
@FernandoHCFaria Thanks for your tests!
Yes, I can confirm that it works for me too on my Xperia 1 VI with Android 15 :).
@pegelf Thanks!
Okay, after some testing I found out, that it's still possible for the bottom bar to be hidden behind the Android navigation, because of the keyboard.
Steps to reproduce:
- open the "members" page
- type something into the search
- press enter on the keyboard
When the keyboard minimizes, the bottom menu is behind the Android navigation again, at least on my phone. I'm using Floris Board as keyboard app.
When I minimize the keyboard by pressing the search button of the input box, instead of using the enter key of the keyboard, the bottom menu keeps it's bottom padding and is still usable. So this behavior only applies to search boxes that can be triggered by using the enter key. The global HumHub search and multi line input fields aren't affected.
Maybe it's possible to use a workaround for keydown-events with event.key === "Enter"?
I confirm this little issue. Samsung S23, Android 15, keyboard Microsoft SwiftKey
@pegelf @FernandoHCFaria Thanks for sharing. I reopen this issue and we'll see what we can do.
@pegelf @FernandoHCFaria Can you try https://github.com/humhub/app/releases/tag/v1.2.7 if it solves this keyboard issue? Thanks!
@marc-farre for me the issue was fixed
@FernandoHCFaria It's about your last comment "I confirm this little issue.", for https://github.com/humhub/app/issues/293#issuecomment-2983260221
@FernandoHCFaria It's about your last comment "I confirm this little issue.", for #293 (comment)
Yes, I just tested in members/search and now I have no problem using the keyboard/enter key
@FernandoHCFaria thanks for your tests!