Bug Report: Mobile Safari/Chrome iOS crashes when pinch-zooming merch product modal

[BrandonCANalytics]

Report

When viewing a merch product on iOS, pinch-zooming the product image inside the product modal can cause the page to reload and eventually crash.

URL
https://posthog.com/merch?product=james-hawkins-ultra-action-figure

Steps to reproduce

1. Open the URL above on an iPhone.
2. Pinch to zoom as far as you can

while the product modal is open.
3. The browser reloads the page.
4. After the page reloads and reopens the product modal, pinch to zoom again.

Actual result

• Safari displays: A problem repeatedly occurred on "https://posthog.com/merch?product=james-hawkins-ultra-action-figure"
• Chrome on iOS displays: Can't open this page

The behavior was reproducible across multiple attempts.

Technical info

• Device: iPhone 17 Pro
• Browsers: Safari and Chrome (iOS)
• Page: /merch product modal opened via ?product=james-hawkins-ultra-action-figure

While investigating, I noticed the product page is rendered within a fixed-position modal containing a scrollable content area and image carousel. This may be related to how iOS WebKit handles pinch-zoom and viewport changes inside nested scroll containers, though I have not confirmed the root cause.

The product itself does not appear unusually large. The primary image is approximately 1250x1248 and ~2.5 MB, while other products contain more and larger images without obviously explaining the crash.

Expected outcome, or solution

Pinch-zooming a product image should either:

• Work normally without reloading or crashing the page, or
• Be gracefully constrained if zoom gestures are not supported within the modal experience.

Potential areas to investigate:

• Interaction between the modal, scroll container, and iOS pinch-zoom behavior
• Overscroll containment and scroll chaining on mobile Safari
• Fixed-position modal sizing (100vw / transformed layouts) on iOS
• Radix Dialog and ScrollArea behavior during visual viewport changes

[BrandonCANalytics]

Screen recordings:

https://github.com/user-attachments/assets/b160c41b-7573-4214-a67f-febd47bf4314
https://github.com/user-attachments/assets/7bc03a6c-1369-4e6f-91f8-e6def06f0638

[vmaineng]

Hey Brandon! :) Great catch on this. I tested it on my iPhone and noticed the same outputs as your screen recordings.

I'm wondering that when you pinch-zoom inside it, iOS didn't know the gesture is meant to stay inside the popup causing it to leak out and affect the whole page.

I recommend to contain scroll and zoom gestures with overscrollBehavior: contain on the modal content div in Collection.tsx.

I'd love to open a PR for this. Would it be possible to get the Shopify environment variables to run the merch store locally for testing? Totally understandable if I can't either but I have a possible solution above :)