[Bug] app-bridge.js breaks scrolling inside `s-modal` (Polaris web components) on Safari

[pama1999]

Description

app-bridge.js (automatically injected by the Shopify admin) breaks wheel/trackpad scrolling inside s-modal from polaris.js web components on Safari (macOS). The scrollbar thumb still works, but wheel and trackpad input is completely ignored.

This is not app-specific — it reproduces on a fresh clone of the official Shopify Remix app template with zero custom code.

Reproduction

1. Clone the official template:

   git clone https://github.com/Shopify/shopify-app-template-remix.git
   

2. Add polaris.js to app/root.tsx head:

   <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

3. Create a test route app/routes/app.modal-test.tsx:

   export default function ModalTest() {
     return (
       <div style={{ padding: "24px" }}>
         <s-button command="--show" commandFor="test-modal">Open Modal</s-button>
         <s-modal id="test-modal" heading="Scroll Test" size="large">
           <div style={{ minHeight: "2000px" }}>
             Try to scroll this content with your trackpad or mouse wheel on Safari.
           </div>
         </s-modal>
       </div>
     );
   }

4. Run npm run dev, open the app in the Shopify admin on Safari (macOS)

5. Open the modal → wheel/trackpad scrolling does not work

Root cause isolation

I systematically eliminated every possible cause:

Test	Result
Removed all app CSS (Tailwind, Polaris React CSS, etc.)	Still broken
Removed all third-party scripts (Intercom, PostHog, Sentry, etc.)	Still broken
Stripped root.jsx and app.jsx to match template exactly	Still broken
Rendered modal via raw innerHTML (bypassing React)	Still broken
Clean iframe on same page with only polaris.js (no app-bridge.js)	Works
Added Tailwind + Polaris CSS + Vite HMR to the iframe	Still works
Fresh template clone with polaris.js added	Broken

The only difference between the working iframe and the broken main page is app-bridge.js, which the Shopify admin injects into the main document.

Expected behavior

Wheel/trackpad scrolling should work inside s-modal on Safari, the same way it works on Chrome.

Actual behavior

Scrollbar thumb works. Wheel and trackpad scrolling is completely ignored. It appears app-bridge.js is intercepting or consuming wheel events before they reach the s-modal shadow DOM scroll container.

Environment

• Browser: Safari 18.x, macOS 15.x
• Chrome: Works fine
• App: Embedded Shopify Remix app (also reproduces on fresh template)
• polaris.js: CDN (https://cdn.shopify.com/shopifycloud/polaris.js)
• app-bridge.js: Injected by Shopify admin

Related

• Polaris Community: s-modal content is not scrollable in Safari
• Polaris Community: s-modal content not scrollable on Safari — s-internal-scroll-box broken in shadow DOM