Fix Glitchy Scrolling on Dawn Theme in Instagram Browser: A Community Deep Dive

Ever had that sinking feeling when you spend hours perfecting your Shopify store’s look, only to find a crucial part of it glitches out on a specific browser? It’s a common headache, especially when that browser is the Instagram in-app one, where so many of our potential customers discover us!

Recently, a store owner, @HP92P, brought just such an issue to the Shopify community forums. They were grappling with a frustrating problem: their Dawn theme (version 15.4.1) was showing "glitchy scrolling behavior" on their homepage’s Featured Collections and Multicolumn sections. The culprit? The beloved "reveal scroll animation" that usually adds such a slick touch, turning sticky and ruining the customer experience, but only when viewed through the Instagram in-app browser.

The issue disappeared when the reveal animations were turned off, but who wants to lose those awesome effects? @HP92P even shared a video of the problem, which really helped the community visualize the frustration:

Why Instagram's Browser Can Be a Pain

It’s not uncommon for different browsers to interpret web code slightly differently. Instagram’s in-app browser is notorious for its unique rendering quirks, often stripping down or altering certain CSS properties or JavaScript behaviors to optimize for its own environment. This can wreak havoc on complex animations like the scroll-reveal effects found in modern themes like Dawn, leading to those "sticky" or "glitchy" moments.

The Community's Proposed Fixes: A Deep Dive

Thankfully, the Shopify community is full of brilliant minds, and a comprehensive solution was quickly proposed by @Wsp. The core idea? Detect when a user is in the Instagram browser and, when they are, either disable or simplify those tricky animations to ensure a smooth scrolling experience. They also included some general scroll-state management and mobile-specific adjustments.

Step 1: Tweak Your theme.js for Browser Detection and Scroll Control

The first part involves adding some JavaScript to your theme’s main JS file. This code does two things:

1. Detects Instagram: It checks if the user agent string contains 'Instagram'. If it does, it adds a class called instagram-browser to the element. This is super clever because it lets us target Instagram users specifically with CSS.
2. Manages Scroll State: It adds a class is-scrolling to the element whenever a user is actively scrolling. This class is removed shortly after scrolling stops. This allows us to pause animations during active scrolling to prevent jankiness.

Here’s the code @Wsp suggested adding to the bottom of assets/theme.js:

// Detect Instagram in-app browser
if (navigator.userAgent.includes(‘Instagram’)) {
  document.documentElement.classList.add(‘instagram-browser’);
}

// Scroll state control
let isScrolling;

window.addEventListener(‘scroll’, () => {
  document.documentElement.classList.add(‘is-scrolling’);

  clearTimeout(isScrolling);

  isScrolling = setTimeout(() => {
    document.documentElement.classList.remove(‘is-scrolling’);
  }, 250);
});

Step 2: Add CSS to base.css for Animation Control

Next, you’d add CSS to your base.css file. This CSS uses the classes we just added with JavaScript to control animations:

• Pause during scroll: When the is-scrolling class is active, it tells .scroll-trigger elements (which are often used for reveal animations) to halt their animations and transitions.
• Instagram-specific fix: If the instagram-browser class is present, it completely disables animations, forces opacity to 1, and removes any transforms for .scroll-trigger elements. This ensures they appear immediately and statically, avoiding the glitch.
• Mobile-safe handling: It also includes some rules for smaller screens (up to 768px) to disable transforms and scroll-snap on sliders, which can sometimes cause issues on mobile.

Paste this at the bottom of assets/base.css:

/* Pause animations during active scroll */
.is-scrolling .scroll-trigger {
  animation: none !important;
  transition: none !important;
}

/* Instagram in-app browser fix */
.instagram-browser .scroll-trigger,
.instagram-browser .scroll-trigger.animate--slide-in,
.instagram-browser .scroll-trigger.animate--fade-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile-safe animation handling */
@media (max-width: 768px) {
  .scroll-trigger {
    transform: none !important;
    will-change: auto !important;
  }

  .slider,
  .slider-mobile-gutter {
    scroll-snap-type: none !important;
  }
}

Step 3: Check Carousel Initialization Timing

Finally, @Wsp suggested looking at how your carousel scripts are initialized in files like sections/featured-collection.liquid and sections/multicolumn.liquid. If they’re firing on DOMContentLoaded, the recommendation was to move them to window.load. The difference? DOMContentLoaded fires when the HTML is fully parsed, while window.load waits for all resources (images, scripts, etc.) to be fully loaded. Sometimes, an animation trying to run before all its associated assets are ready can cause jankiness.

Example of moving initialization:

window.addEventListener(‘load’, function () {
  // slider initialization code here
});

The Outcome and What It Means for You

After trying these detailed steps, @HP92P reported that, unfortunately, "this did not work." This is a crucial piece of feedback from the thread. It highlights that while these are standard and well-reasoned approaches to such problems, sometimes theme customizations, other apps, or specific browser versions can introduce unique challenges that require further investigation. Another community member, @Mustafa_Ali, offered a partial solution that was essentially a subset of @Wsp's CSS and JS for Instagram detection, reinforcing the general strategy, but it’s unlikely to have worked if the more comprehensive solution didn't.

What to Do If You're Facing This Glitch

Even though the solution didn't work for @HP92P, the approach is still solid and often effective for many stores. Here’s how you can try to implement it, keeping in mind that your mileage may vary:

1. Backup Your Theme! Seriously, always do this before editing code. Go to Online Store > Themes > Actions > Duplicate.
2. Access Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme, click "Actions," then "Edit code."
3. Modify assets/theme.js:
   1. Locate assets/theme.js (or sometimes global.js or similar, depending on your theme version/customizations).
   2. Scroll to the very bottom of the file.
   3. Paste the following JavaScript code:

   // Detect Instagram in-app browser
   if (navigator.userAgent.includes(‘Instagram’)) {
     document.documentElement.classList.add(‘instagram-browser’);
   }
   
   // Scroll state control
   let isScrolling;
   
   window.addEventListener(‘scroll’, () => {
     document.documentElement.classList.add(‘is-scrolling’);
   
     clearTimeout(isScrolling);
   
     isScrolling = setTimeout(() => {
       document.documentElement.classList.remove(‘is-scrolling’);
     }, 250);
   });
   

4. Modify assets/base.css:
   1. Locate assets/base.css (or sometimes theme.css or a similar global stylesheet).
   2. Scroll to the very bottom of the file.
   3. Paste the following CSS code:

   /* Pause animations during active scroll */
   .is-scrolling .scroll-trigger {
     animation: none !important;
     transition: none !important;
   }
   
   /* Instagram in-app browser fix */
   .instagram-browser .scroll-trigger,
   .instagram-browser .scroll-trigger.animate--slide-in,
   .instagram-browser .scroll-trigger.animate--fade-in {
     animation: none !important;
     opacity: 1 !important;
     transform: none !important;
   }
   
   /* Mobile-safe animation handling */
   @media (max-width: 768px) {
     .scroll-trigger {
       transform: none !important;
       will-change: auto !important;
     }
   
     .slider,
     .slider-mobile-gutter {
       scroll-snap-type: none !important;
     }
   }
   

5. Check Carousel Initialization (Advanced):
   1. Open sections/featured-collection.liquid and sections/multicolumn.liquid.
   2. Search for any JavaScript code that initializes sliders or carousels (e.g., using `new Swiper(...)` or similar custom functions).
   3. If you find such code wrapped in `document.addEventListener('DOMContentLoaded', function() { ... });`, try changing it to `window.addEventListener('load', function() { ... });`. Be careful not to add functions that don't already exist.
6. Test Thoroughly: After saving your changes, clear your browser cache and test your store extensively, especially on mobile devices and, crucially, within the Instagram in-app browser.

Dealing with browser-specific glitches can be tricky, but the key takeaway from this community discussion is the power of targeted fixes. By identifying the problem browser and applying specific CSS and JavaScript to adjust behavior, we can often smooth out those rough edges. Even when a solution doesn't work for everyone, it provides a valuable starting point and teaches us more about these complex interactions. Keep an eye on your mobile analytics, and don't hesitate to dive into the code or reach out to a developer if these common workarounds don't quite hit the mark for your unique store setup!