[Bug] Android Chrome can place hosted Code App bottom nav below the visible viewport in Play

[callumalpass]

Describe the bug

When a Power Apps Code App is opened through the standard Play host on a real Android device in Chrome, a persistent bottom navigation/footer can render below the visible viewport instead of staying attached to the visible bottom edge.

On affected pages, the nav often does not appear until the user scrolls to the bottom and performs one extra overscroll gesture. Once it appears, the top of the page can become partially unreachable until the user performs another extra scroll gesture, at which point the nav disappears and the page becomes fully scrollable again.

Steps to Reproduce

1. Open a deployed Power Apps Code App through the normal Play URL on a real Android phone in Chrome.
2. Navigate to a page with enough vertical content to scroll and a persistent bottom navigation bar.
3. Scroll through the page normally.
4. Notice that the bottom nav may sit below the visible viewport instead of being visible.
5. Scroll all the way to the bottom and perform one extra downward pull / overscroll gesture.
6. Observe that the nav appears.
7. Scroll back toward the top while the nav is visible.
8. Observe that the top of the page is no longer fully reachable.
9. Perform one extra upward gesture / overscroll at the top.
10. Observe that the nav disappears and the top of the page becomes reachable again.

Expected behavior

The bottom nav should remain aligned with the visible mobile viewport at all times, and the full page should remain reachable without requiring extra scroll gestures.

Actual behavior

The bottom nav can render below the visible viewport on Android Chrome. It only appears after an extra overscroll gesture at the bottom of the page, and while it is visible the top of the page can become partially inaccessible until another extra gesture hides the nav again.

Screenshots or Error Messages

There are no runtime or console errors associated with this issue. The problem is visual/behavioral. It reproduces on a real Android device in Chrome, but not in Chrome DevTools mobile emulation.

Environment information

• Framework, build tool or relevant package used: React + Vite, hosted as a Power Apps Code App
• Any connection/components: Power Apps Play host, Dataverse-backed app

Additional context

We tested multiple app-side layout approaches, including:

• document-scroll layouts
• sticky/footer CSS rewrites
• visualViewport-based height and offset handling
• a shared scroll container for content + footer

The behavior persisted across all of these approaches on-device.

This appears to be related to the hosted Play shell rather than only app CSS. The Play host uses fixed 100vh / overflow: hidden containers, and the app runs cross-origin inside the Play shell (runtime-app.powerapps.com inside apps.powerapps.com). That may mean viewport APIs inside the app only reflect the iframe-local viewport, not the true visible top-level mobile viewport after Android Chrome browser chrome expands/collapses.

[eschavez]

Thanks for the detailed write-up and for working through so many layout approaches before filing this — the repro steps and the context about the cross-origin iframe are really helpful.

We're able to reproduce the general class of problem: on Android Chrome, the browser's dynamic toolbar (the address bar that slides away on scroll) resizes the visual viewport independently of the layout viewport, and when a Code App runs cross-origin inside the Play shell's iframe, the visualViewport API inside the iframe reflects only the iframe-local viewport rather than the true top-level visible area. The Play shell uses fixed 100vh / overflow: hidden containers, which pins layout to the layout viewport height — so when Chrome's UI chrome expands or collapses, the bottom nav can end up outside the visible area.

This is a Play-host-level concern rather than something app-side CSS or visualViewport listeners can fully compensate for, since the root containers are in the outer shell.

We're investigating on our end and will post any workaround or update here once we have more to share. In the meantime, if you haven't already, setting height: 100dvh (dynamic viewport height) on your outermost app container can sometimes reduce the effect on app-controlled elements, though it won't address shell-level containers.

Thanks again for the report!