एचटीएमएल 5 स्लाइडर क्रोम के डिवाइस मोड के तहत गायब हो गए

Question

यह बस क्रोम बग हो सकता है लेकिन मुझे यह अभी तक कहीं भी नहीं मिला है, इसलिए हम यहां जाते हैं।

मैं जावास्क्रिप्ट 30.com अभ्यास के हिस्से के रूप में एक साधारण अभ्यास पर काम कर रहा हूं। अभ्यास जावास्क्रिप्ट के माध्यम से सीएसएस चर अद्यतन करने के लिए कुछ एचटीएमएल 5 रेंज इनपुट का उपयोग करता है।

मैंने देखा कि जब मैं उत्तरदायी प्रदर्शन मोड में क्रोम डेवलपर टूल का उपयोग करता हूं तो पृष्ठ से रेंज इनपुट गायब हो जाता है। उनका निरीक्षण करने से पता चलता है कि वे वास्तव में डोम में हैं लेकिन उनकी ऊंचाई 0px पर सेट की गई है। सीएसएस में कुछ भी नहीं है जिसे मैं अपराधी के रूप में देख सकता हूं और यदि मैं उत्तरदायी डिस्प्ले मोड से बाहर निकलता हूं तो इनपुट अपेक्षित रूप से प्रदर्शित होता है।

क्या यह क्रोम के उपकरण के साथ एक क्विर्क है या क्या इसे रोकने के लिए कुछ सीएसएस है?

स्ट्रिप-डाउन कोड निम्नानुसार है।

: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

मेरा मानना ​​है कि क्रोम उत्तरदायी मोड में शैली को अक्षम करता है। निम्नलिखित सीएसएस नियम यह फिर से प्रकट होना कर देगा:

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