Closed tuxrinku closed 1 year ago
Sorry for that. What device are you using? What Android version?
My bad I completely forgot to put details. I'm using a Poco F2 pro, on Android 11. I tried both firefox and brave browser, the same thing happens on both.
I use both a Galaxy J5 (Android 5) and a Galaxy A51 (Android 12) with this app and I cannot reproduce this issue on either device. You might want to try yet another browser (Chrome?) just to be sure.
Sorry but atm I can't help :cry:
I'll let this issue open in case someone else can add more details that could help identify the cause.
I think it's just "hiding" behind the android navigation bar, since I can see an element behind it. Probably because the navigation bar is on-screen and not physical. I'll try to play with some css and eventually figure a workaround. Merci !
Probably because the navigation bar is on-screen and not physical.
On my Galaxy A51 the navigation bar is also on-screen but I don't have this issue :confused:
I'm having the same issue on a Fairphone 3 running Firefox 107.1.0 on LineageOS. My wife also has this issue on some Sony Xperia (will check the model and browser if it's important).
Some things I noticed:
As a workaround I am currently using HomeApp to launch OurShoppingList. This opens the app in the built-in browser and everything works just fine.
Whenever I create an additional list, everything works fine. I can see the bottom bar to add new items. I can then browse to existing lists and see the bottom bar as well. I can even refresh the site and the bottom bar is still visible.
But the very moment I close the tab and reopen it, the bottom bar is gone. I can only see the small grey bar as in the screenshot.
In firefox you can change the viewport to desktop view. This will of course render everything way smaller and allows you to zoom in and move around. But whatever I try, there is still just a small grey bar at the bottom.
When I go into desktop view, zoom in a little bit, scroll down and then change back to mobile view, the bottom bar suddenly appears. But now the top bar suddenly is gone.
Switching between desktop view and mobile view multiple times while zooming and scrolling around will then at some point fix everything.
I suspect this comes from these directives that always seemed like a wonky workaround to me:
Unfortunately my CSS skills are kinda poor so I would love to see what's the "proper way" to do that :thinking:
I have the same issue too on my Android 13 running Mull 108.1.1 and Brave 1.46.154 (Chromium 108.0.5359.128)
Adding on @koeberlue remarks, my best way to resolve this was to use Our Shopping List as a PWA. This way both browsers work flawlessly.
I believe that it is a big drawback for mobile users and that the docs might benefit from a note on that matter
Hi @tuxrinku @koeberlue @onjour I've made a tiny change on the CSS and deployed a temporary version at https://dev.osl.lanterne-rouge.info.
Since I'm unable to reproduce the issue myself with my own devices, could you tell me how it's working with yours?
Hi @nanawel !
Thanks for the follow up! Well on my side it works very nicely. That did it for me on the two browsers I mentioned earlier 👍 I was totally able to add two items on the "test" list from my phone 😜
The fix has been released: https://github.com/nanawel/our-shopping-list/releases/tag/2.5.1
Reopening. The new version broke the rendering on my device instead :sob: (it was working fine on my computer though)
Hi @onjour @tuxrinku @koeberlue
I'm trying a new approach, but I still need your help in confirming it works "not only on my computer" (or mobile): https://dev.osl.lanterne-rouge.info
Could you check again please? I need the results both in a browser and as a PWA, to be sure.
:x: Edit: Nope, it's buggy on my device when the on-screen keyboard is displayed. I'll keep digging.
Hi @nanawel!
Thanks for digging into this. I tried yesterday and everything was fine, sorry to read that there are still issues on your side. I hope you'll figure that soon enough 👍
OK, found a lead: https://developer.chrome.com/blog/viewport-resize-behavior/
So this is new with recent versions of Chrome and derivatives. I could confirm this when I updated my browser (I scarcely do so).
This time I'm almost 100% confident that it now should be fixed the right way.
@tuxrinku @koeberlue @onjour can I ask you to test it again on https://dev.osl.lanterne-rouge.info/ please?
Thanks
Edit: Well, it still breaks on my old Galaxy J5 running Android 5 with Vivaldi 3.7. The bottom search bar is no longer reachable when the list grows larger than the screen's height. I'll try to figure out if I can find an acceptable workaround for this case.
For the record, the root of this issue seems to be about
vh
and svh
CSS units (including Chrome 99+ and derivatives)svh
)So I've made a clean fix for recent browsers (it's the easiest), and also some workaround based on what I've read here and there on the web. So far I've managed to make it work on:
@tuxrinku @koeberlue @onjour can I ask you to test it again on https://dev.osl.lanterne-rouge.info/ please?
Just tested on my phone. Works great. Couldn't get it to make the search bar disappear :+1:
When using the app on mobile, I can't see the block to add a new item. Screenshot below. Everything else works fine. Any idea on how to fix this ?