iOS Safari下:active缩小滑块的range输入拖动异常，求纯CSS解决方案

问题根因 #

iOS Safari中修改滑块thumb的width、height、margin等触发布局重排的属性时，会导致浏览器丢失手指与滑块的命中关联，同时布局尺寸缩小后也会降低滑块的捕获概率，最终出现拖动卡住、很难选中的问题。

纯CSS解决方案 #

不要修改影响布局的属性，改用transform: scale()实现视觉缩放：

• transform属于合成层属性，不会触发重排，不会打断拖动关联
• 滑块原始布局尺寸保留，命中区域大小不变，不会出现难捕获的问题
• 缩放比例按实际需求计算即可，视觉效果和直接修改宽高完全一致

修改后完整代码 #

CSS #

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 {
  /* 24为目标尺寸，56为原始尺寸，自动计算缩放比例，无需手动换算 */
  -webkit-transform: scale(calc(24 / 56));
  transform: scale(calc(24 / 56));
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

HTML #

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

内容的提问来源于stack exchange，提问作者Tobbe