Navbar Buttons Cut Off After Orientation Change in iOS PWA (“Add to Home Screen”)

Here’s the bug your AI generated. I’ve seen this bug reported numerous times in the past several years so I don’t have much hope it will be fixed, but figured I’d re-report anyway

Description:
When using my Glide app as a PWA via “Add to Home Screen” on iOS (tested on iOS 18 through iOS 26.2), the navigation bar buttons are cut off after switching from portrait to landscape and then back to portrait. The issue does not occur in Safari or Chrome browsers on iOS, and does not affect Android devices under any conditions.

Steps to Reproduce:

  1. Open the app on an iOS device via “Add to Home Screen.”
  2. Start in portrait orientation.
  3. Rotate the device to landscape (app switches to desktop form factor).
  4. Rotate back to portrait (app switches back to phone form factor).
  5. Observe that navbar buttons are visually truncated/cut off.

Temporary Solution:
Force-quitting and restarting the app restores the navbar, but this isn’t a reasonable action to expect of end users.

Additional Details:

  • Issue occurs across multiple iOS versions (18 through 26.2).
  • Not reproducible in browsers on iOS or anywhere on Android.
  • The form factor switch triggers the rendering bug.

We’ve tested this but cannot reproduce the behavior you’re describing. Can you please provide a screen recording and any other device-specific details about the device you’re testing with? Have you tried different devices? Do you have any magnification settings enabled on your device?

2 Likes

No magnification settings but I only tested on two iPhone SE phones (3rd gen) and an iPad Pro. The issue doesn’t occur on the iPad Pro (the navbar is always at the top on that device).

If you tested on one of the newer iPhones that are all screen, then this bug may only affect smaller iPhones such as the SE.

I can try to test on a larger screen phone tomorrow. I won’t have access to one until then.

I tested this on my iPhone 14 Pro Max (26.2), and it works as expected.

2 Likes

Is your page/app public? If so I could test on there if you send me the link.

I’m afraid not, sorry.

1 Like

No problem. Can you go to mine? It’s public. https://ratings.glide.page/

Switch to landscape mode and then back to portrait and tell me if the navbar buttons are cut off after switching back to portrait. Or if the amount of space under the icons changes at all, too.

Just tested. Works as expected both in the browser (Safari) and after being installed.

Can you share a screenshot of what you see?

Sure thing. Sounds like it’s limited to the smaller iPhones, perhaps just ones with a Home button?

Here’s before and after changing to landscape mode and back to portrait.

Thanks for the help.

What happens if you disable the CSS that you are using in your header?

1 Like

Just tried. No difference.

1 Like

Also, for what it’s worth, I tried several CSS approaches to resolve the issue, but none worked of course.

1 Like

Any ideas?

How about creating an entirely new app from scratch and creating 3 screens (no need to add data or anything else, it’s just for testing purposes): what happens when you test portrait > landscape > portrait ?

If the icons appear as expected, maybe we can assume that the problem stems from the original app.

If the icons do not appear, I think we can conclude the issue is not your app. It would either be Glide or your phone.

1 Like

Done:

Same issue. To be clear, it only happens after adding the app to the home screen and opening it from there. Oh, I already mentioned that I guess. Screenshot:

Since it happens on two phones, I doubt it’s “the phone”… but probably “the phone’s screen size”, since both phones have the same screen size (both are iPhone SE 3rd gen).

1 Like

This seems to be a bug, and your workaround isn’t all that easy to implement (“Force-quitting and restarting the app restores the navbar”).

For you this bug is quite unfortunate bug as it might affect your daily usage of the app. Hopefully it’s an edge case. Notifying Glide again so they can assess the severity of the bug.