google-chrome - 输入类型范围在移动端Chrome滚动时很容易误触发

Question

我有与 2 个按钮并排的范围输入。当您在移动 Safari 上滚动时，很容易意外移动输入，但是按钮没有这个问题

这是标记：

<div class="row">
  <button>-</button>
  <input class="range" type="range" min="0" max="100" value="10">
  <button>+</button>
</div>

但是这个演示可能是看到这种情况发生的更好方法：

https://wsor1.csb.app/

为什么会这样？它只是一个浏览器qwerk？有什么方法可以缓解吗？

这不是那么相关，但负责的 React 代码是：https ://codesandbox.io/s/pedantic-neumann-wsor1

const Row = () => {
  const [value, setValue] = React.useState(10);

  return (
    <div className="cont">
      <div className="row">
        <button onClick={() => setValue(value - 10)}>-</button>
        <input
          onChange={e => setValue(+e.currentTarget.value)}
          className="range"
          type="range"
          value={value}
          min={0}
          max={100}
        />
        <button onClick={() => setValue(value + 10)}>+</button>
      </div>
    </div>
  );
};
export default function App() {
  const items = new Array(50).fill(0);
  return (
    <div className="App">
      {items.map((item, index) => {
        return <Row key={index} />;
      })}
    </div>
  );
}

标签： google-chromeuser-experience