I have a vertical fullscreen slider. Everything works in Safari, but in Chrome the page jumps to the top position of the slide. The radio buttons are at the top of the DIV “css-slider-wrapper” and I navigate by clicking on the label related to the radio button. The reason that the page jumps to the top position of the slide is, that the radio buttons are at the top of the DIV “css-slider-wrapper”.

I already tried to place the radio buttons in a wrapper with a position absolute bottom 0, but then the slider doesn’t work anymore. Also when I place the radio buttons in the DIV “slider-pagination” the slider doesn’t work anymore.

How can I prevent, that by clicking on a label the page jumps to the position of the radio buttons in Chrome?

HTML:

    <div class="css-slider-wrapper">
      <input type="radio" name="slider" class="slide-radio1" id="slider_1">
      <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
      <input type="radio" name="slider" class="slide-radio3" id="slider_3">
      <div class="slider-pagination">
        <label for="slider_1" class="page1">Navigation 1</label>
        <label for="slider_2" class="page2">Navigation 2</label>
        <label for="slider_3" class="page3">Navigation 3</label>
      </div>
      <div class="slider slide1">
        <div class="box">
            <h2>Title</h2>
          Text
      </div>
    </div>    
      <div class="slider slide2">
            <h2>Title</h2>
          Text
    </div>    
      <div class="slider slide3">
        <div class="box">
            <h2>Title</h2>
          Text
      </div>
    </div>```
    
    CSS:
    ``` .css-slider-wrapper {
      display: block;
      background: #FFF;
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    
    .slider, .slider2 {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 1;
      z-index: 0;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      justify-content: center;
      align-content: center;
      -webkit-transition: -webkit-transform 1600ms;
      transition: -webkit-transform 1600ms, transform 1600ms;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    
    
    .slide1, .slide4 {
      background: #feffca;
      left: 0;
    }
    .slide2, .slide5 {
      background: #feffca;
      left: 100%
    }
    .slide3, .slide6 {
      background: #feffca;
      left: 200%
    }
    
    .slide4, .slide5, .slide6{
       background: #c7eefb;
    }
    
    .slider > div, .slider2 > div {
      text-align: center;
    }
    
    .slider-pagination {
      position: absolute;
      bottom: 0px;
      width: 100%;
      left: 0;
      text-align: center;
      z-index: 1000;
    }
    .slider-pagination label {
      font-family: 'ABC Simon Mono Thin';   
      width: auto;
      height: auto;
      display: inline-block;
      cursor: pointer;
      padding: 0px 50px;
    }
    
    .slider-pagination .page1, .slider-pagination .page4{
        margin-bottom: 100px;
    }
    
    /* Slider slide effect */
    .slide-radio1:checked ~ .slider, .slide-radio4:checked ~ .slider2 {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
    .slide-radio2:checked ~ .slider, .slide-radio5:checked ~ .slider2 {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    .slide-radio3:checked ~ .slider, .slide-radio6:checked ~ .slider2 {
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%);
    }