[Bug] Code App iframe uses `100vh` which includes Android nav bar, causing bottom content to be hidden
@madhumach がすでに取り組んでいます。
2026年7月7日 から。
評価
この issue はまだ評価されていません。
説明
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.
- 主要言語
- TypeScript
- スター
- 504
- フォーク
- 145
- 平均マージ
- 4時間 3分
- マージ済み PR（30日）
- 1
環境構築
このプロジェクトの環境構築ファイルはまだ確認していません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
microsoft/PowerAppsCodeApps のほかの issue
-
[Bug] Generated Dataverse delete() discards IOperationResult, so failed deletes are silent対応中かも @ergonza93 が 1 日前に担当しました。 オープンbug
microsoft/PowerAppsCodeApps#469 · コメント 1 件 · 担当者 1 名 ·
-
bug
難易度 5/5 1週間以上 初心者へのやさしさ 20/100
microsoft/PowerAppsCodeApps#467 ·
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
microsoft/PowerAppsCodeApps#465 ·
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
microsoft/PowerAppsCodeApps#463 · コメント 1 件 ·
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
microsoft/PowerAppsCodeApps#462 ·
microsoft/PowerAppsCodeApps の issue をすべて見る
似ている issue
-
bug HemiStake
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
hemilabs/ui-monorepo#2413 ·
メンテナーはふだん 1 日以内に返信
-
component/ui framework/react kind/bug language/javascript
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
meshery/meshery#22216 · コメント 3 件 ·
メンテナーはふだん 1 日以内に返信
-
type/bug
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
paperclipai/paperclip#14982 ·
メンテナーはふだん 1 日以内に返信
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
lingdojo/kana-dojo#31515 · コメント 1 件 · リアクション 5 件 ·
メンテナーはふだん 1 日以内に返信