[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.