[iOS 11.2644.0] App Bridge Save Bar: embedded page stops receiving touches after Discard

App Bridge
1

In the Shopify iOS app, tapping Cancel and then Discard on the App Bridge Save Bar leaves the embedded page unresponsive. It can’t be scrolled or tapped. Shopify’s bottom navigation still works, and leaving and coming back restores the page. “Keep editing” doesn’t cause the problem. Desktop web and mobile Safari aren’t affected.

Environment

  • Shopify Mobile iOS 11.2644.0 (Build 314668), iOS 18.7, iPhone
  • App Bridge from cdn.shopify.com/shopifycloud/app-bridge.js
  • Embedded app on a development store
  • Android not tested

Steps to reproduce

  1. Open an embedded app with this page in the iOS app:

    <input id="field" value="5" />
<ui-save-bar id="bar">
  <button variant="primary">Save</button>
  <button id="discard">Discard</button>
</ui-save-bar>
<script>
  const bar = document.getElementById('bar')
  document.getElementById('field').addEventListener('input', () => bar.show())
  document.getElementById('discard').addEventListener('click', () => bar.hide())
</script>

  2. Change the field so the Save Bar appears.

  3. Tap Cancel, then Discard in the “You have unsaved changes” dialog.

  4. Try to scroll or tap the page.

Expected: the page keeps responding.
Actual: the page stops responding until you navigate away with the bottom navigation and return.

What we measured
We logged touches and page state on a test page:

  • touchstart, pointerdown and scroll counts all stay flat after Discard.
  • JavaScript keeps running, with timers still firing and no errors.
  • The page has no scroll lock or inert.
Variation Result
Calling hide() one second later Still freezes
data-save-bar form instead of ui-save-bar Still freezes
Polaris web components loaded Still freezes
Keyboard closed before tapping Cancel Still freezes
history.pushState after Discard Still freezes
location.reload() after Discard Still freezes, even on the freshly loaded page

Because a freshly loaded page stays frozen, the block seems to be outside the web page, possibly something left over from the dialog.

Workaround we found
Hiding the bar, waiting 500ms, then calling open('shopify://admin/apps/<client id>', '_top') restored touch without a page reload. It worked both times we tried it, on the app’s root URL only. Our test URL also carried a query parameter (?v=top).

This may be related to the Android Discard issue fixed in October, since it happens at the same step.

Can you reproduce this, and is the shopify:// navigation safe to rely on until there’s a fix?

2

Thanks for the detailed report. The variation table made this much faster to track down.

I was able to reproduce it on iOS 11.2644.0 with your snippet. You were right that the block sits outside the web page. When you tap Discard on an embedded app opened from the main navigation, the app lays a still image of the page over the live page and never removes it. Your page keeps running underneath, but every tap and scroll hits the image. That’s why reloading inside your app doesn’t help, and why leaving and coming back does.

A fix is in progress on our side. I can’t give a release date yet, but I’ll update this thread when it ships.

On your question: hiding the bar, waiting a moment, then calling open(‘shopify://admin/apps/’, ‘_top’) is a reasonable stopgap. It works because navigating Admin to your app clears the leftover image. Two caveats:

  • It reloads your app’s root page, so anything not yet saved is lost. That’s usually fine right after a Discard.
  • It’s a workaround, not a supported API. Plan to remove it once the fix ships.