[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