Describe the bug
When using a Power Apps code app (React/Vite) with a dark theme, white strips/bars are visible around the app content when playing on mobile. The app's iframe cannot control the host container's background color, creating a jarring visual contrast against dark app content.
Steps to Reproduce
- Create a Power Apps code app with a dark theme/dark background
- Open the app on a mobile device via: - Home screen shortcut (web app): White strip visible at the top
- Mobile browser: White strips visible at both top and bottom
- Observe the white areas between the Power Platform host UI and the app iframe
Expected behavior
The Power Platform player host container should either:
- Respect the app's value
- Provide an API or app setting to configure the host background color
- Use a transparent/neutral background that blends with the app content
Actual behavior
- Home screen shortcut (web app): A white strip is visible at the top of the screen
- Mobile browser: White strips are visible at both top and bottom of the screen
- Native Power Apps mobile player: Bars at top and bottom are black regardless of the app's theme (both in light and dark mode)
The app cannot style these areas because the host container is cross-origin and outside the iframe. CSS solutions like setting html/body background, ::before pseudo-elements, negative margins on the top bar, and attempting window.parent.document access all fail to resolve it.
Screenshots or Error Messages
N/A visual issue only, no errors.
Environment information
- Framework, build tool or relevant package used: React 19, Vite 7.3, TypeScript, pac code push
- Any connection/components: Microsoft Dataverse, Office 365
Additional context
This primarily affects mobile usage where the white strips against a dark app background create a very noticeable visual contrast. Workaround attempted: extending the app's top bar with top: -40px and a gradient from white to dark background to soften the transition. This helps visually but doesn't fully resolve the issue since the host container background is not controllable from within the app.
Describe the bug
When using a Power Apps code app (React/Vite) with a dark theme, white strips/bars are visible around the app content when playing on mobile. The app's iframe cannot control the host container's background color, creating a jarring visual contrast against dark app content.
Steps to Reproduce
Expected behavior
The Power Platform player host container should either:
Actual behavior
The app cannot style these areas because the host container is cross-origin and outside the iframe. CSS solutions like setting html/body background, ::before pseudo-elements, negative margins on the top bar, and attempting window.parent.document access all fail to resolve it.
Screenshots or Error Messages
N/A visual issue only, no errors.
Environment information
Additional context
This primarily affects mobile usage where the white strips against a dark app background create a very noticeable visual contrast. Workaround attempted: extending the app's top bar with top: -40px and a gradient from white to dark background to soften the transition. This helps visually but doesn't fully resolve the issue since the host container background is not controllable from within the app.