Question

我已经创建了一个在线问卷。客户坚持要对其中一个问题有一个垂直的范围。

调查问卷的用户报告说，在某些情况下（例如，在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上的范围是否存在错误？

谢谢

向下滚动页面时，垂直范围会在移动设备上的Chrome上捕捉到范围的顶部

0 个答案: