Radio button causes browser to jump to the top

Question

Problem:

When clicking on a label (for a radio button that has been intentionally hidden by positioning it off-screen), the browser undesirably jumps to the top of the

Answer 1

The accepted answer is not accessible: visibility: hidden; will hide your content from screen readers. Regardless, the trouble is here:

.rdbut label input {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Specifically, the top: -9999; is causing the browser to try and go up to that point.

I like to set a class for hiding stuff like this, with the following parameters. Then you can just stick it anywhere:

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Note the top: auto; which should prevent the jump.