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

Question

这可能只是一个Chrome bug,但我还没有发现它在任何地方提到过,所以我们走了.

我正在进行一项简单的练习,作为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;
}