[Bug] Code App iframe uses `100vh` which includes Android nav bar, causing bottom content to be hidden
@madhumach is already working on this.
Since Jul 7, 2026.
Assessment
This issue has not been assessed yet.
Description
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.
- Dominant language
- TypeScript
- Stars
- 504
- Forks
- 145
- Avg merge
- 4h 3m
- Merged PRs (30d)
- 1
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from microsoft/PowerAppsCodeApps
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 45/100
microsoft/PowerAppsCodeApps#465 ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
microsoft/PowerAppsCodeApps#464 · 1 comment · 5 reactions ·
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 35/100
microsoft/PowerAppsCodeApps#463 ·
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 48/100
microsoft/PowerAppsCodeApps#462 ·
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 48/100
microsoft/PowerAppsCodeApps#461 ·
All issues in microsoft/PowerAppsCodeApps
Similar issues
-
clawsweeper:linked-pr-open clawsweeper:no-new-fix-pr clawsweeper:source-repro impact:message-loss issue-rating: 🦞 diamond lobster maturity:stable P2
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#616 ·
-
ZCode 3.14.3 に対応する Open
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
supermomonga/zcode-acp#24 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
growthbook/growthbook#7100 ·
-
triage
Difficulty 1/5 1-3 hours Newbie friendliness 88/100