HTML5 滑块在 Chrome 的设备模式下消失

Question

这可能只是一个 Chrome 错误，但我还没有在任何地方发现它，所以我们开始吧。

我正在做一个简单的练习，作为 JavaScript30.com 练习的一部分。该练习使用一些 HTML5 范围输入来通过 javascript 更新 CSS 变量。

我注意到，当我在响应式显示模式下使用 Chrome 开发人员工具时，范围输入会从页面中消失。检查它们显示它们实际上在 DOM 中，但它们的高度已设置为 0px。 CSS 中没有任何我认为是罪魁祸首的东西，如果我退出响应式显示模式，输入会按预期显示。

这是 Chrome 工具的怪癖还是有一些 CSS 可以防止这种情况发生？

下面是精简代码。

:root {
  --base: #f7c235;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

.highlight {
  color: var(--base);
}

body {
  text-align: center;
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

.controls input {
  width: 12rem;
  min-height: 2rem;
}

<div class="controls">
  <label for="spacing">Spacing:</label>
  <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

  <label for="blur">Blur:</label>
  <input type="range" name="blur" min="10" max="25" value="10" data-sizing="px">

  <label for="base">Base Color</label>
  <input type="color" name="base" value="#f7c235">

</div>

Answer 1

我相信 chrome 会在响应模式下禁用样式。下面的 CSS 规则会让它重新出现：

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  height: 18px;
  width: 18px;
  margin-top: -8px;
  border-radius: 99px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 4px;
  background: #ddd;
}