Я создал онлайн анкету. Клиенты настаивают на наличии вертикального диапазона для одного из вопросов.
Пользователи вопросника сообщают, что при определенных обстоятельствах диапазон достигает верхней границы диапазона: в Chrome, на мобильных устройствах и только тогда, когда диапазон отображается ниже на странице.
В этих условиях, когда диапазон находится в верхней части страницы, можно изменить значение диапазона.
Когда страница прокручивается так, что диапазон выше, страница не может быть выбрана; касание диапазона приводит к тому, что кнопка переходит в верхнюю часть диапазона.
Повторная прокрутка страницы позволяет снова правильно выбрать диапазон.
Я удалил код:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
input[type="range"]
{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
</style>
</head>
<body >
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
<INPUT TYPE="range" value="5" min="0" max="10" step="1">
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR>
</body>
</html>
Чтобы воспроизвести проблему, запустите страницу на мобильном телефоне в Chrome. Касание диапазона позволяет кнопке двигаться. Прокрутите страницу вверх, чтобы диапазон оказался ближе к верху, и попробуйте изменить значение диапазона.
Есть ли ошибка в коде или диапазоне на chrome на мобильных устройствах?
Спасибо