Chrome瀏覽器的設備模式下HTML5滑塊消失

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

我相信鉻禁用響應模式的花式。下面的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; 
 
}