Skip to content

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

Description

@alibergcherrihost

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., <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> 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 <meta name="viewport" viewport-fit=cover">.
  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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions