Chrome中点击label跳转到div顶部位置

Question

我有一个垂直全屏滑块。在 Safari 中一切正常，但在 Chrome 中页面会跳转到幻灯片的顶部位置。单选按钮位于 DIV“css-slider-wrapper”的顶部，我通过单击与单选按钮相关的标签进行导航。页面跳转到幻灯片顶部位置的原因是单选按钮位于 DIV“css-slider-wrapper”的顶部。

我已经尝试将单选按钮放置在位置绝对底部 0 的包装器中，但滑块不再工作。另外，当我将单选按钮放在 DIV“滑块分页”中时，滑块不再工作。

如何防止点击标签时页面跳转到 Chrome 中单选按钮的位置？

这是原始滑块： https://www.htmllion.com/examples/pure-css-based-fullscreen-slider-demo.html

问题是：我使用的是页面内部。页面中只有 1 个部分是滑块。

.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%);
}

<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>

Answer 1

页面向上移动，因为

input

位于页面顶部，并且焦点移至它们。
所以，

input[class^="slide-radio"] { display: none; }

应该可以解决问题