The s-modal Polaris web component does not scroll its content on Safari (macOS). The scrollbar is visible but non-functional — wheel/trackpad scrolling does nothing. Works perfectly on Chrome.
Root cause (from debugging):
Inside s-modal’s shadow DOM, the internal structure is:
dialog.modal
div.layout (CSS Grid)
div.header
s-internal-scroll-box ← broken on Safari
div.content
slot (children)
div.footer
- On Chrome: s-internal-scroll-box gets proper height from the grid row, overflow: auto works, content scrolls.
- On Safari: s-internal-scroll-box collapses to 0px height as a grid child. Content renders at full size through it (visible but not scrollable). Even when patched via injected styles to have correct
dimensions (h: 220, scrollH: 342, overflow: auto), Safari still doesn’t allow scroll interaction on this custom element.
This appears to be a Safari bug with custom elements (s-internal-scroll-box) used as CSS Grid children inside shadow DOM. Native with overflow: auto scrolls fine on Safari in the same context.
Steps to reproduce:
- Create any s-modal with enough content to overflow (e.g. the “Different modal sizes” example with size=“large-100”)
- Open it on Safari (macOS, tested on Safari 18.x / macOS Sequoia)
- Try to scroll — scrollbar appears but content won’t scroll
Expected: Content scrolls like on Chrome.
Environment:
- polaris.js from https://cdn.shopify.com/shopifycloud/polaris.js
- Safari 18.x, macOS 15.x (Sequoia)
- App running as embedded Shopify app (iframe in admin)
- All custom CSS/scripts removed, issue persists with only polaris.js loaded