Hello Shopify Developers,
We’re seeing a layout issue in the Shopify Mobile app on iOS where there’s a large gap between our embedded app’s bottom action bar (“Finish checking” button) and Shopify’s own native floating nav buttons at the bottom of the screen. On Android the same screen sits much closer to the native nav buttons, so this looks iOS-specific.
We size our bottom bar’s bottom padding using the --shopify-safe-area-inset-bottom CSS custom property that Shopify Mobile injects via App Bridge, so the gap seems to come from that value being larger than necessary on iOS (both are 100px, which seems to include the Android 3 button navigation area that shows on my Pixel 4 phone, but obvisouly doesn’t exist on iOS).
App: Scanpacker
Affected screen: “Scan order items” (order checking screen)
Platforms: iOS shows the large gap; Android does not - screenshots attached (with debug overlay showing css variable value).
- ios.jpeg
- android.jpg
Steps to reproduce:
- Open our app (Scanpacker) in the Shopify Mobile app on an iPhone.
- Navigate to Orders then click “Start Checking” next to a paid-for order.
- Compare the space between the “Finish checking” button and the native bottom nav buttons to the same screen on Android.
Expected: the bottom bar sits close to the native nav buttons, similar to Android.
Actual: there’s a large empty gap between the bottom bar and the native nav buttons on iOS.
Happy to provide more info if useful!
Thanks,
Tom
