Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug] Code App iframe uses `100vh` which includes Android nav bar, causing bottom content to be hidden

Aperta
#364 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

@madhumach ci sta già lavorando.

Dal 7/7/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

bug product team investigating

Summary

The Power Platform shell sets .player-shell-content { height: calc(100vh) }, which
sizes the iframe to the layout viewport height. On Android Chrome, 100vh includes
the persistent bottom navigation bar (~71px), which physically overlays the WebView.
The iframe is genuinely that tall, but the bottom portion is hidden behind the nav bar
with no way for code inside the iframe to detect it.

Environment

  • Device: Android 10, Chrome 148
  • screen.height: 780px
  • window.outerHeight: 780px
  • window.innerHeight: 747px (= 100vh, includes nav bar overlay)
  • visualViewport.height: 747px (also reports layout viewport)
  • Actual visible height: ~676px (747 − ~71px nav bar)
  • devicePixelRatio: 3

Root Cause

.player-shell-content {
height: calc(100vh); /* ← layout viewport, includes Android bottom nav bar */
...
}

On Android Chrome, 100vh = layout viewport = includes the bottom navigation bar.
The browser draws the nav bar on top of the WebView without reducing innerHeight
or visualViewport.height. No JS API inside the iframe reports the true visible height.

The chain:

.player-shell-content { height: 100vh } → 747px

<iframe height="100%"> → 747px (genuinely 747px tall) window.innerHeight → 747px (correct for the iframe) visualViewport.height → 747px (Chrome only adjusts for keyboard) Actual visible area → ~676px (71px hidden behind nav bar)

Proposed Fix

Change the shell CSS to use dvh (dynamic viewport height), which is specifically
designed to exclude persistent browser chrome:

.player-shell-content {
height: 100dvh; /* excludes Android nav bar, iOS home indicator, etc. */
}

Workaround (for app developers until fixed)

Developers must hardcode per-device bottom offsets as CSS custom properties seeded
by user-agent heuristics. This is brittle and requires manual updates per device/OS.

Lingua principale
TypeScript
Stelle
504
Fork
145
Merge medio
4h 3m
PR unite (30g)
1

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/PowerAppsCodeApps

Tutte le issue di microsoft/PowerAppsCodeApps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.