--shopify-safe-area-inset-bottom css property incorrect on IPAD/Android tablets

[DylanHenderson]

Describe the bug

On tablets (tested on Ipad an Android device), the --shopify-safe-area-inset-bottom CSS custom property reports a non-zero value in embedded apps even when the floating bottom navigation bar overlay is not displayed.

When the Shopify Mobile app is full-screen, the admin uses its regular-width layout (side navigation, no floating bottom bar). The webview still receives a non-zero --shopify-safe-area-inset-bottom, so fixed-bottom UI positioned per your documented pattern (bottom:
var(--shopify-safe-area-inset-bottom, 0px)) floats above empty space instead of sitting at the bottom of the screen.

The property is described here:
https://shopify.dev/changelog/new-css-variable-for-mobile-safe-area-insets

It says it defaults to 0 when no overlay is present but that's not true.

To Reproduce

Steps to reproduce the behaviour:

1. Open the Shopify Mobile app full-screen and launch any embedded app that positions a fixed element with bottom: var(--shopify-safe-area-inset-bottom, 0px)
2. Note that no floating bottom navigation bar is shown

Expected behaviour

--shopify-safe-area-inset-bottom should be 0px whenever the floating bottom bar overlay is not displayed

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge-react @ 4.2.3
• @shopify/shopify-app-remix @ 3.5.1
• @shopify/polaris @ 13.9.0

Platform

• OS: IOS and Android
• OS Version: IPADOS 26.4.2
• App: Shopify Mobile App