HTML5 Sliders Disappear Under Chrome's Device Mode

Question

This may simply be a Chrome bug but I haven't found it mentioned anywhere yet so here we go.

I'm working on a simple exercise as part of the JavaScript30.com exercises. The exercise uses some HTML5 range inputs to update CSS variables through javascript.

I noticed that when I use Chrome developer tools in responsive display mode the range inputs disappear from the page. Inspecting them shows they are in fact in the DOM but their height has been set to 0px. There is nothing in the CSS that I can see as a culprit and, if I exit responsive display mode the inputs display as expected.

Is this a quirk with Chrome's tools or is there some CSS to prevent this?

Stripped-down code follows.

: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

I believe chrome disables the stylings in responsive mode. The following CSS rules will make it reappear:

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;
}