При клике на label в слайдере страница прокручивается наверх


#1

Добрый день. Тренируясь создавать слайдеры на СSS столкнулся с интересным багом. На странице элементы слайдера input[type=“radio”] вынесены в самый вверх страницы. Им задан класс visually-hidden. Класс с кнопками переключения расположен абсолютно в нужном месте.
При клике на label все отлично переключается, но страница прокручивается в самый верх.
Буду признателен за помощь.

<body>
<input type="radio" class="visually-hidden" id="product-1" name="toggle" checked>
<input type="radio" class="visually-hidden" id="product-2" name="toggle">
<input type="radio" class="visually-hidden" id="product-3" name="toggle">
	<div class="page-wrapper">
		<div class="container">
			<header class="main-header">
			</header>
			<main>
			<h1 class="visually-hidden">Главная страница с мороженым</h1>
					<section class="slider">
						<div class="slider-controls">
							<label for="product-1">Первый</label>
							<label for="product-2">Второй</label>
							<label for="product-3">Третий</label>
						</div>
						<ul class="slider-list">
							<li class="slider-item slide" id="slide1">
								<h3 class="slider-title">Крем-брюле и пломбир с малиновым джемом</h3>
								<a href="#" class="slider-button">Давайте оба</a>
							</li>
							<li class="slider-item slide" id="slide2">
								<h3 class="slider-title">Шоколадный пломбир и лимонный сорбет</h3>
								<a href="#" class="slider-button">Давайте оба</a>
							</li>
							<li class="slider-item slide" id="slide3">
								<h3 class="slider-title">Пломбир с помадкой и клубничный щербет</h3>
								<a href="#" class="slider-button">Давайте оба</a>
							</li>
						</ul>
					</section>
</body>

вот CSS стили

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
	position: absolute;
	top: 0;
	left: 0;

	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;

	white-space: nowrap;
	opacity: 0;
	-webkit-clip-path: inset(100);

	        clip-path: inset(100);
	clip: rect(0 0 0 0);
	overflow: hidden;
	z-index: -999;
}

.page-wrapper {
	min-width: 940px;
	
	background-color: #849d8f;
	background-image: url("../img/ice-slider-1.png");
	background-repeat: no-repeat;
	background-position: top center;
	
	transition: background-image 0.5s ease background-color 0.5s ease;
}

.page-wrapper::before,
.page-wrapper::after {
	content: "";

	visibility: hidden;
}

.page-wrapper::before {
	background-image: url("../img/ice-slider-2.png");
}

.page-wrapper::after {
	background-image: url("../img/ice-slider-3.png");
}

.container {
	width: 1146px;
	margin: 0 auto;
	padding: 0 27px;
}

.slider {
	position: relative;
	
	padding-top: 325px;
	text-align: center;
	
	color: #ffffff;
}

.slider-list {
	padding: 0;
	margin: 0;

	list-style: none;
}

.slider-list .slider-title {
	width: 700px;
	margin: 0 auto;
	margin-bottom: 27px;

	font-size: 60px;
	line-height: 60px;
	font-weight: bold;
}

.slider-controls {
	position: absolute;
	bottom: 63px;
	left: 0;
	z-index: 20;

	font-size: 0;
}

.slider-controls label {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 8px;

	vertical-align: top;
	
	background-color: transparent;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
}

.slide {
	display: none;
}

#product-1:checked ~ .page-wrapper {
	background-color: #849d8f;
	background-image: url("../img/ice-slider-1.png");
}

#product-2:checked ~ .page-wrapper {
	background-color: #8996a6;
	background-image: url("../img/ice-slider-2.png");
}

#product-3:checked ~ .page-wrapper {
	background-color: #9d8b84;
	background-image: url("../img/ice-slider-3.png");
}

#product-1:checked ~ .page-wrapper #slide1,
#product-2:checked ~ .page-wrapper #slide2,
#product-3:checked ~ .page-wrapper #slide3 {
	display: block;
} 

#product-1:checked ~ .page-wrapper label[for="product-1"],
#product-2:checked ~ .page-wrapper label[for="product-2"],
#product-3:checked ~ .page-wrapper label[for="product-3"] {
	background-color: #ffffff;
}

#2

Возможно, это происходит из-за того, что при клике на label браузер автоматически ставит фокус на нужный input и из-за этого страница прокручивается вверх (так как input в начале страницы).


#3

Может имеет смысл все input переместить в разметке куда-нибудь рядом с label или абсолютным расположением переместить поближе к кнопкам?


#4

Попробуйте


#5

Действительно, баг заключался в том, что класс visually-hidden скрывает элементы, но они остаются доступны с точки зрения взаимодействия с ними. И браузер при клике на лейбл показывал, где располагаются связанные input.

Все гениальное просто. Решил проблему, задав display: none всем тегам input у слайдера. Но сколько же пришлось поизощряться с классом visually-hidden)

Спасибо Вам auraST за помощь.


#6

Рада была помочь=)