GoogleChromeLabs / GoogleChromeLabs/bubblewrap
TWA leaves blank notch area when display mode is fullscreen/fullscreen-sticky
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 319
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
After successfully configuring Digital Asset Links to remove the URL bar, the TWA does not draw into the physical device notch/cutout area. Even when configuring `"display": "fullscreen"` in the `twa-manifest.json` and adding `viewport-fit=cover` to the web app's HTML, the Android wrapper still leaves a blank/black letterbox strip at the top of the screen where the hardware notch sits.
It appears the generated Android project does not automatically apply the required Android window layout parameters (e.g., `shortEdges` in `themes.xml`) to allow edge-to-edge rendering in TWAs.
**To Reproduce**
Steps to reproduce the behavior:
1. Initialize a new Bubblewrap project with `"display": "fullscreen-sticky"` in `twa-manifest.json`.
2. Ensure the source web app includes ``.
3. Build the APK using `bubblewrap build`.
4. Install on a physical Android device that has a camera notch or display cutout.
5. Notice the blank, unused screen real estate at the top of the display instead of true full screen.
**Expected behavior**
When a developer requests a fullscreen display mode, the compiled TWA should render true edge-to-edge, drawing underneath the device notch/cutout automatically.
**Screenshots**
**Desktop:**
- OS: Windows 10 22H2
- Bubblewrap Version: 1.24.1
**Smartphone:**
- Device: CMF Phone 1
- OS: Android 16
- Browser: Chrome 149.0.7827.103
Contributor guide
Assessment
This issue has not been assessed yet.