How to prevent page jumps when checkbox's state changes?

Issue

Example page.

When you scroll down the page until you can only see a little portion of the label (lightgreen/lightblue vertical rectangle), then click on the label to change the state of the checkbox. You then see the page jumps up in order to show the whole label.

How to prevent the jump from happening? I know setting CSS display: none on the input works, but that also hides the input from screen readers and is bad for Accessibility.

Solution

Check this. Use visibility, the element will still in document.

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

Answered By - Lolo.