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

Posted 2023-03-07

【中文标题】HTML5 滑块在 Chrome 的设备模式下消失

【英文标题】：HTML5 Sliders Disappear Under Chrome's Device Mode

【发布时间】：2017-05-01 10:50:30

【问题描述】：

这可能只是一个 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>

【问题讨论】：

我无法重现该问题。你的意思是他们被推离了右边的页面吗？

我在打开开发者工具、刷新窗口并单击“运行代码 sn-p”时看到了这个问题 - 你找到解决方案了吗？

我无法重现此问题，它可能已得到解决，因为 crome 在提出问题后发布了多个更新。如果它不再可重现，我会建议关闭它。

我可以在 Chrome 64.0.3282.167 中重现这个。

【参考方案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;

【讨论】：

错误报告：bugs.chromium.org/p/chromium/issues/detail?id=807625