较小的输入类型范围：活动滑块在 iOS Safari 上并不总是有效

Question

我有一个标准的 html5 范围输入（又名滑块），当滑块处于活动状态时，我使滑块拇指（手柄）变小。这在我需要支持的所有网络浏览器中都可以正常工作，iOS 上的 Safari 除外（仅在 iPhone 上尝试过）。

一旦我更改了 :active 类中的宽度和高度 css 属性，就很难抓住滑块句柄来更改值。它有时有效，但并非总是如此。滑块处于活动状态，因此大小发生变化，但滑块“卡住”。当我尝试滑动它时，它不跟随我的手指。

这是一个带有两个滑块的 CodePen，顶部的滑块完美无缺，底部的滑块有时难以在 Safari 上“抓取”https://codepen.io/tobbe_lundberg/pen/wvervQx

这是它的代码：

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  margin-top: 40px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: pink;
  height: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 56px;
  width: 56px;
  background: pink;
  margin-top: -24px;
}

input[type="range"]:active::-webkit-slider-thumb {
  height: 56px;
  width: 56px;
  margin-top: -24px;
}

input.resize[type="range"]:active::-webkit-slider-thumb {
  height: 24px;
  width: 24px;
  margin-top: -10px;
}

<input type="range" min="0" max="100" step="1"/>
<input class="resize" type="range" min="0" max="100" step="1"/>

如何仅使用 CSS 使调整大小效果在 Safari 上也起作用？

Answer 1

编辑：我解决它的方法可能不适合你（并且有点像黑客），是让拇指在视觉上更小，但实际上并没有更小。您可以使用近乎透明的边框（或与背景颜色相同的边框）来抵消可见部分的缩小尺寸。

---

评论太长了，但你解决了吗？我遇到的问题看起来和你的完全一样，不同之处在于我的滑块拇指很薄。

看到您的问题，我尝试利用反向作为解决方案：在活动时使滑块拇指更大。当谈到更容易抓住拇指时，这实际上就像一个魅力。

我注意到了一件事，我认为这可能是您所看到问题背后的原因之一：更改滑块拇指实际上会更改滑块的范围，从而改变滑块的位置。如果你把拇指做得很大，你会注意到整个范围变得很短。