Selecting a variant option (ex: size, color) causes the page to scroll upward slightly

[JKLRedeemed]

When viewing my site, bygracealonedesignco.com, on desktop I'm noticing that when I select a specific variant type, like a size or a color, the right side of the product page shifts up slightly. If you select a different variant, it does it again. If a customer decides to look through the colors, the page would continue to scroll up with each change. This is incredibly annoying and really needs to get fixed. I'm using the 9.0.0 Dawn Theme. I also have no password enabled. And if it's relevant, I do have my site set to show the relevant images of each variant color. Meaning, if you select 'yellow', it will show the yellow shirt image. 

I can't really show this issue in an image, so I hope I was clear enough. I have no idea what is causing this, so any help would be appreciated!

[dmwwebartisan]

@JKLRedeemed 

I think this is code related issue. please disable all apps and check the product page. if not solve your problem Please hire a Shopify expert who can help you.

Thanks!

[JKLRedeemed · Accepted solution]

I finally found a solution on my own, thanks to Berricle's response on another very similar question. The solution is commenting out JS line item from media-gallery.js. 

Go to Assets > media-gallery.js and locate these lines of code:

if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
   activeMedia.scrollIntoView({behavior: 'smooth'});
}

Replace this with the following code or add two backslashes, "//", before each line to comment it out. This essentially turns these lines into comments that will not be used to affect your site. If done correctly, these lines will show up as a different color in the js code and the page will no longer shift upon clicking variant options.

//if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
//   activeMedia.scrollIntoView({behavior: 'smooth'});
//}

Hope this helps!

[cactusbecks]

So I use Dawn version 13.0.1, but I can not find this text in the media-gallery asset folder. Any one a solution please?

[Shourya_Karan]

I think it can be found on the 52nd line in the media-gallery.js file, as it can also be found in the Dawn version 13.0.1.
Thank you.

[tryfunky]

on Dawn, Near line 59 of media-gallery.js ; use comment to remove a few lines, finally it will look like below:

---

@cactusbecks wrote:

So I use Dawn version 13.0.1, but I can not find this text in the media-gallery asset folder. Any one a solution please?

---

---

---

const activeMediaRect = activeMedia.getBoundingClientRect();
// Don't scroll if the image is already in view
// if (activeMediaRect.top > -0.5) return;
//const top = activeMediaRect.top + window.scrollY;
// window.scrollTo({ top: top, behavior: 'smooth' });
// });
this.playActiveMedia(activeMedia);

Thanks