GoogleChromeLabs / GoogleChromeLabs/bubblewrap

TWA leaves blank notch area when display mode is fullscreen/fullscreen-sticky

Open
#1,035 0 comments 0 reactions 0 assignees View on GitHub
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**
Screenshot of the notch issue

**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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.