Shopify POS iOS: the embedded app header ignores the top safe area, so the top bar elements overlap the status bar

Polaris
1

When our embedded app opens in Shopify POS on iPhone, the header that POS draws above it doesn’t leave room for the status bar or Dynamic Island.

  • Left: the close (X) button sits almost on top of the clock.
  • Right: the blue “More” button is almost completely hidden behind the signal, Wi-Fi and battery icons.

This header is drawn by the POS app, outside our web view, so we can’t fix it from our side. Our layouts use a plain <meta name="viewport" content="width=device-width, initial-scale=1.0"> without viewport-fit=cover. We don’t style the host UI and haven’t changed anything related recently.

Environment

  • Device: iPhone Pro 16 (with Dynamic Island)
  • iOS: 18.7.8
  • Shopify POS app: 11.14.0
  • App: Order Printer Pro, embedded app with App Bridge

Steps to reproduce

  1. Open Shopify POS on an iPhone with a Dynamic Island.
  2. Open Order Printer Pro from the POS home screen tile.
  3. Look at the header at the top of the screen.

Expected: The header starts below the status bar, and the X and “More” buttons are fully visible and easy to tap.

Actual: The header starts at the very top of the screen, so its buttons collide with the clock and the status icons.

Is this a known regression in a recent POS iOS release? Is there a workaround on the app side?

I’ve posted both a screenshot and a video to a Google Drive folder, which you can view here.