[Bug] - Polaris web components s-modal content is not scrollable in Safari

Polaris
11

Update: Isolated the root cause, it’s app-bridge.js conflicting with polaris.js web components on Safari

I spent several hours systematically isolating this and can now confirm: this is NOT an app-specific issue. It reproduces on a completely fresh clone of the official Shopify Remix app template.

Proof: Fresh template reproduction

I cloned the official Shopify Remix template (git clone https://github.com/Shopify/shopify-app-template-remix.git), made zero changes except:

  1. Added <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script> to root.tsx
  2. Added a test route with an s-modal containing long scrollable content

Result: Same bug. No scrolling on Safari. This is a bone-stock template with zero custom code, zero third-party dependencies, zero CSS customizations.

Isolation process (on my production app)

To make sure it wasn’t something in my app, I went through a systematic elimination:

  1. Stripped root.jsx and app.jsx to match the template exactly — removed Tailwind, Intercom, PostHog, Sentry, all third-party scripts → still broken

  2. Removed all stylesheets from the DOM (Tailwind, React Polaris CSS, Flip CSS, Inter font) → still broken

  3. Injected a raw DOM modal via innerHTML bypassing React entirely → still broken

  4. Created a clean iframe on the same page with only polaris.js and a modal — no app styles, no React, no Remix, nothing → scrolling works!

  5. Added back Tailwind CSS, React Polaris CSS, and Vite HMR client to the iframe → still works

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

Conclusion

This is a conflict between app-bridge.js (automatically injected by the Shopify admin iframe) and polaris.js web components’ shadow DOM scroll handling on Safari.

  • s-modal scrolls perfectly in any context where app-bridge.js is not present
  • s-modal breaks in any context where app-bridge.js is present — including a fresh template clone
  • Since app-bridge.js is injected by the Shopify admin and cannot be removed or blocked, this needs to be fixed on Shopify’s side

@argyle @Anthony_Frehner This matches your earlier observation that “the scrollbar thumb can be used but not the wheel… as if there’s something overlaying and consuming the scroll event.” App Bridge appears to be intercepting/consuming wheel events in a way that prevents them from reaching the shadow DOM scroll container on Safari.

Environment: Safari 18.x, macOS 15.x, polaris.js from CDN, embedded Shopify Remix app.