Page jumps down if I click on product image or variant - please help.

[tiptoesteps]

Hello all, 

I am having a problem with my product page. 

I am using the brooklyn them. 

On desktop if an image or variant is selected the page sometimes jumps down. Its very strange.

Does anyone know a solution to this? I would greatly appreciate some help. 

Link to product page: https://tiptoesteps.com/products/support

Kind regards,

[Jasoliya]

Hi @tiptoesteps 

I have checked but i cant see this, if you can share video then share it.  so we can get issue exact.

[tiptoesteps]

Here is a link to screen recording: https://drive.google.com/file/d/1_e9RamjvKD2C2hsxDtaRBCW_3XQd5JMx/view?usp=sharing

Let me know what you think. 

[Jasoliya]

Give me access or send me video on private msg or mail. 

[Gustavoheraclio]

Hello .. Good night. I'm having the same problem as our colleague. When I click on a variant the site takes me down for no reason. I've tried everything, change photo format, take description, put description, but nothing worked. I do not know what else to do. I use Brooklyn too. I am willing to resolve this issue at any time, thanks for listening.

https://drive.google.com/file/d/1UlKBRO8zWCMSK5g6P2d9qb4V6H7_3sWf/view?usp=drivesdk 

[Jasoliya]

Hi 

Thats because of brooklyn theme have sticky section function, i have solved it by custom code based on issue for @tiptoesteps 

Send me store url or pm me

[Gustavoheraclio]

Hi, thanks for listening.

my website is https://thefoxbrazil.com/
and the password is flathu

in case you need anything else, I will be here to help

[Jasoliya · Accepted solution]

Hi for that i need to check in code because cant find issue from front side. you can hire developer for that or pm me 

[Gustavoheraclio]

i just wanna solve this...

whats your email? and how can i contract you?

[Gustavoheraclio]

I just saw your email, I'll send you a message for it

[nielskliim]

I have the same problem, as I guess many others do. Very strange that "jump down" is an acceptable feature of the Brooklyn theme. Did you pay for the solution or is it something you will share?

[pauafactory]

Hey, have you found a solution? Dealing with the same problem.

[pauafactory]

@Gustavoheraclio @Jasoliya @tiptoesteps @nielskliim 

Has anyone found a solution to this issue?

Thanks!

[Jasoliya]

Yes we have to change some js code as per theme, you have to hire developer or pm me

[omidmirzaee]

Hi,

I found a solution seem to be working for me, 

Short answer:

Open timber.css and search for "hide", you will find a rule that assigns 

display: none;

to the "hide" class. Now change "display:none;" to:

width: 0;

Vola, it should work now!

Methodology:

I went deep through the js code and realized when you click on a variant image it adds a "hide" class to the images that are not showing and removes the hide class from the new image, and in timber.css in my case the "hide" class has a property 

display : none;

which basically makes the object disappear from the viewport that's why browser jumps down, because for couple of milliseconds there is nothing there to show.

What I did to solve the problem doesn't actually solve it, its a way to get around that issue, its to put 

width : 0;

in the class "hide" instead of "display : none". It essentially makes the image invisible while keeping the same height and thus the page wont jump down.

Let me know if you need anything else and if the solution worked for you.

Cheers

[rghamari]

I am having the same problem on my site. Did anyone else tried Omidmirzaee solution?

[rghamari]

I actually tried your solution, but it ended causing issues with the cart button showing twice on my header menu. 

[Al4j0]

Hello everyone, this is really a problem with the Brooklyn theme with the hide class of the first element, it happens when clicking on a different image from the first one, scrolling and clicking on the first thumbnail.
Here I have a solution that although it is not perfect, it allows to reduce the problem:
Add to the bottom of your theme.js file:
$(".product-single__thumbnail").click(function(){return $("html, body").animate({scrollTop:150},600),!1});