A custom-coded product page on desktop experiences unwanted page jumping when users click variant options lower on the page. The jump distance correlates with how far down the variant is positioned.
Proposed Solutions:
input[name=Intentions] { display: none; }) to the section’s Custom CSS settingsResolution:
The issue was resolved by changing the HTML element from a <label> to a <div> and adjusting the CSS styling accordingly. This prevented the browser from automatically scrolling the selected label into view.
Accessibility Concern:
A warning was raised that replacing labels with divs may compromise website usability and accessibility, as labels enable click-to-select functionality and assist users with disabilities in navigation.
My stores product page was custom coded so I need help figuring out the code behind this is causing the issue. My store is mycrystalvessel.com on the product page only on desktop, if you select one of the variants which you have to scroll down to see the page jumps down. The further down the variant the further down the page jumps, this doesn’t happen with variant options at the top. Any idea what in the code is causing this issue?
Thanks.
Hello @Alfie7766 ,
Not sure for the exact issue but if you want to fix it.
Edit this section JS and event prevent the click so this thing will not happen.
Regards
Guleria
This seem to be a CSS-related issue.
Go to this section settings in Cusomizer and paste this into “Custom CSS” setting:
input[name=Intentions] {
display: none;
}
I changed the input from a label to a div, as on desktop the screen tries to have the selected label in frame, so by turning it into a div and adjusting the css to style it has been solved.
Hi @Alfie7766 
Careful with that, you can be undermining both the usability and accessibility of your website.
Labels allow clicking the labels area to make a selection and helps the blind or low motion individuals navigate a website.