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

Polaris
1

I noticed in Safari that if your s-modal content needs scrolling, trackpad/wheel scrolling isn’t working.

I fixed it for now with a custom workaround

image
image1964×2018 458 KB

2

I think we have some fixes here already merged in but not yet deployed, but I’ll double check with the team.

3

This is great news thanks @Anthony_Frehner :folded_hands:

4

Do you have an easy reproduction for us to validate on? You can fork this codepen to easily create one https://codepen.io/afrehner/pen/pvJmQvr

5

Sure @Anthony_Frehner here is the code you can use for validation. https://codepen.io/Farid-Movsumov-the-reactor/pen/LEZqdYr

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


  <s-button commandFor="modal">Open</s-button>

  <s-modal id="modal" heading="Details">
    <div style="min-height: 1000px;">
      Height 1000px -  Try to scroll down in Safari
    </div>

    <s-button slot="secondary-actions" commandFor="modal" command="--hide">
      Close
    </s-button>
    <s-button
      slot="primary-action"
      variant="primary"
      commandFor="modal"
      command="--hide"
    >
      Save
    </s-button>
  </s-modal>
6

I’ve created a couple demo’s now (here’s one), tested scrolling in desktop Safari and iOS Safari and I’m not finding any content not scrollable. Help me create a more definitive example? Or maybe the issue isnt in the modal?

7

Strange, these examples work for me in Safari as well. I will try to check what was different in my case and reproduce it for you tomorrow.

8

I can not reproduce it in the codepen but I recorded a screencast for you to show what happens inside my app so maybe this can help modal safari test - 13 February 2026 | Loom

9

very strange, the scrollbar thumb can be used but not the wheel… that’s very telling about the bug, as if there’s something overlaying and consuming the scroll event. does the keyboard scroll it the modal? is the issue isolated to just mousewheel? maybe theres some JS somewhere that’s calling preventDefault and stopping the scroll gesture? when you use inspect element with chrome devtools, is there anything in the way of your mouse when you hover the “un-mousewheee-scrollable area”, as this would indicate there’s an element in the way?

the bad news is, since all reproductions work outside of your app, it points towards an issue with the app. however, there’s a small change the issue is exclusively to when the modal is shown inside the app in shopify’s environment. i’ll try and investigate this, i’ll try opening other apps modals in shopify and see if any of them cant use the scroll wheel.

10

Same problem here! works in codepen but not inside my app, Im pretty sure there is a conflict with something inside the app itself, im still digging to find out what it is, I can imagine this happens to other devs as well as Im using an old official remix app template from Github

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.

12

Happy you were able to reproduce this @Pama :folded_hands:

1 Like
13

Up @argyle @Anthony_Frehner

14

we’ve forwarded the issue to the App Bridge team for deeper investigation, thanks for hanging in there while we work to reproduce the issue and confidently find a fix.