HTML5 slider 在 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;
}