Dawn theme 15.4.1 is experiencing glitchy scrolling behavior on instagram browser only for reveal scroll animation

Technical Q&A
, , , ,
1

Hello!

I need help as the Featured Collections and Multicolumn on my homepage always glitch on mobile, most of my customers come from instagram and the instagram browser always glitches when scrolling, ruining the customer experience. On normal browsers like chrome mobile there are no issues.

How can I remove this glitch and ensure the scroll is smooth so that the featured collections and multicolumn do not become sticky when touched whilst scrolling when instagram website link is clicked? They both have carousel enabled.

The issue completely disappears when turning off the reveal sections on scroll animation, but I want the animation because it is slick otherwise.

Dawn Theme: 15.4.1

Example of error: Watch WhatsApp Video 2026-05-18 at 10.17.46 | Streamable

Website: royajewellery.co.uk

Any help much appreciated.

Thanks!

2

Hey @HP92P try this one add this to your theme’s theme.js or a custom JS snippet

if (navigator.userAgent.includes('Instagram')) {
  document.documentElement.classList.add('instagram-browser');
}

then add this in your base.css

.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;
}

if the code is work then don’t forget to like and mark as solution on it

3

Hello thank you for your reply, unfortunately this did not work. Regards

4

Hi @HP92P

Please send me a proper screenshot or video of the issue so I can understand it clearly.

Best regards,
Devcoder :laptop:

HP92P 5
1 Like
6

Hey @HP92P
Add this in theme.js

Go to:

Online Store → Themes → Edit Code → assets/theme.js

Paste this at the bottom:

// 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);
});
  1. Add this in base.css

Go to:

assets/base.css

Paste this at the bottom:

/* 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 */

 (max-width: 768px) {
.scroll-trigger {
transform: none !important;
will-change: auto !important;
}

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

Open:

sections/featured-collection.liquid
sections/multicolumn.liquid

Check whether the slider/carousel scripts are initializing on:

DOMContentLoaded

If they are, move them to:

window.load

Example:

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

Do not add random functions like:

initCarousels();

unless that function already exists in your theme.

Thank You !