Scroll on Instagram view problem

Technical Q&A
, , , ,

Topic summary

Problem: When the site is opened via Instagram’s in‑app browser, a product image initially displays improperly and only fits correctly after the user scrolls down slightly.

Context: Occurs on the product page of punkforpickles.com. Tagged with CSS, HTML, Shopify themes, and troubleshooting, indicating a front‑end rendering/layout issue.

Observed behavior: On first load from Instagram, the image does not fit the viewport. A small scroll triggers proper sizing.

Evidence: An attached image compares the initial misfit view with the corrected view after scrolling. The attachment is central to understanding the visual discrepancy.

Requested help: Looking for explanations and fixes for why the image renders incorrectly on initial load specifically when launched from Instagram.

Status: No solutions or decisions yet. The issue remains open with unanswered questions about the root cause and remediation steps.

Summarized with AI on December 18. AI used: gpt-5.
1

Hello there!

I have a very weird bug whenever I open my website from Instagram.

The view on the left is how I see my image when I click on the product page.

And only when I scroll down a bit, is when it properly fits into view.

If someone knows why this might be happening I appreciate the support!

The link is: punkforpickles.com

two - Artboard 57(1)
two - Artboard 57(1)1920Ă—1911 261 KB

1 Like
2

This is a common Shopify + Instagram in-app browser issue, not a broken image.

Instagram opens links inside its own browser, which affects viewport height and lazy-loaded images. The image recalculates only after you scroll, so it “snaps” into place.

Why it happens

  • Instagram’s in-app browser misreads 100vh

  • Shopify themes use lazy loading + dynamic image sizing

  • The browser doesn’t fully trigger the layout until scrolling

Quick fixes

  • Remove or reduce height: 100vh on the product image container

  • Disable lazy loading for the main product image

  • Use min-height instead of fixed heights

  • Force image load with CSS/JS on page load

This isn’t your store specifically; it’s a known mobile IG behavior.
I can point you to the exact CSS/section to edit based on your theme

3

I see!

Thanks a lot for your answer.

I would appreciate it a lot if you could tell me the CSS that I need to put in my store to fix this.

I currently run a slightly modified Dawn theme if that helps.

4

The Recommended Fix (CSS-only)

Go to:

Online Store → Themes → … → Edit code → Assets → base.css

Add this at the very bottom of the file:

/* Fix Instagram in-app browser viewport issue on product images */
@supports (-webkit-touch-callout: none) {
  .product__media-wrapper,
  .product__media-list,
  .product__media {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
  }

  .product__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

For Stability

Dawn lazy-loads the main product image. You can disable lazy loading for the first image:

Edit:

Sections → main-product.liquid

Find:

loading="lazy"

Change only for the first product image to:

loading="eager"

This will prevent Instagram’s browser from delaying the layout calculation.