Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.53k stars 3.42k forks source link

[PDP] Product image zooms when viewed through Facebook or Instagram browser #3107

Open andrewetchen opened 1 year ago

andrewetchen commented 1 year ago

Describe the current behavior

When viewed through the native Facebook/Instagram browser, the product image on Dawn is zooming when scrolled. Issue only replicable within Facebook/Instagram in-app browser.

While the Instagram/Facebook in-app browser is not explicitly one of our supported browsers, considering we provide multiple options for merchants to sell/link on FB and Instagram this may be worth reviewing.

Describe the expected behavior

Expected

Product page should ideally function within the FB/Instagram browser as it does on the mobile device's standard browser (Chrome, Safari etc.)

Actual

When viewed within the FB/Instagram app browser, product image is zooming when page is scrolled, leading to 'jumping' on the page

Replication Steps

  1. Click into a product page linked within Instagram, either via a post or a direct message link etc., prompting the store to open within the in-app browser.
  2. Scroll the product page, you will note how the page 'jumps'.

Additional context/screenshots

This is replicable on Dawn 8 onwards (not present in v7), likely due to the restructure of the product media from Dawn 8+ to include the product-media-gallery.

Marking as sev-5 as in-app browsers are not explicitly confirmed as supported browsers, and issue only replicable within Meta's in-app browsers on Facebook & Instagram.

https://github.com/Shopify/dawn/assets/28404165/d30298f1-45d1-4421-9bf1-02638134729d

andrewetchen commented 1 year ago

I haven't troubleshooted this yet but as mentioned on MBT, we currently don't support browsers other than Safari, Chrome, Firefox, and Edge. However, I created this issue just in case the team encounters this issue at some point.