HTML5 Sliders Disappear Under Chrome's Device Mode
<p>This may simply be a Chrome bug but I haven't found it mentioned anywhere yet so here we go. </p>

<p>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. </p>

<p>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.</p>

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

<p>Stripped-down code follows.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>: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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="controls"&gt;
  &lt;label for="spacing"&gt;Spacing:&lt;/label&gt;
  &lt;input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"&gt;

  &lt;label for="blur"&gt;Blur:&lt;/label&gt;
  &lt;input type="range" name="blur" min="10" max="25" value="10" data-sizing="px"&gt;

  &lt;label for="base"&gt;Base Color&lt;/label&gt;
  &lt;input type="color" name="base" value="#f7c235"&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>