क्रोम

Question

के तहत स्क्रॉलबार के साथ अजीब जेड-इंडेक्स व्यवहार 'फिक्स्ड' स्थित तत्वों पर जेड-इंडेक्स सीएसएस संपत्ति का उपयोग करके मुझे क्रोम के नीचे एक अजीब व्यवहार मिलता है।

जब फ़ायरफ़ॉक्स और ओपेरा ब्राउज़र मुझे प्रतीक्षा परिणाम देते हैं, तो क्रोम लाल ओवरले के ऊपर स्क्रॉलबार प्रदर्शित करने के लिए ज़ेड-इंडेक्स प्रॉपर्टी का सम्मान नहीं करता है (कोड और फिडल बेलो देखें)।

HTML:

<div class="left"> 
    <div class="placeholder"></div> 
</div> 
<div class="right"></div> 
<div class="overlay"></div> 

सीएसएस:

.left { 
    background-color: yellow; 
    bottom: 0; 
    left: 0; 
    overflow: auto; 
    position: fixed; 
    top: 0; 
    width: 35%; 
    z-index: 10; 
} 

.right { 
    background-color: orange; 
    bottom: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 65%; 
    z-index: 20; 
} 

.overlay { 
    background-color: red; 
    bottom: 20%; 
    left: 25%; 
    position: fixed; 
    right: 25%; 
    top: 20%; 
    z-index: 40; 
} 

.placeholder { 
    height: 3000px; 
} 

उदाहरण: http://jsfiddle.net/kvNFW/

ओएस: एप्पल मैक ओएस 10.8 गूगल क्रोम: संस्करण 27.0.1453.93

क्या कोई व्यक्ति एक ही समस्या का अनुभव कर रहा है, या उसे ठीक करने का कोई तरीका है?

किसी भी मदद के लिए अग्रिम धन्यवाद।

संपादित करें:

मुद्दे के पूर्वावलोकन के लिए इस screenshot देखें।

Answer 1

आप -webkit-transform: translate3d(0, 0, 0) जोड़ने की कोशिश कर सकते हैं। यह मेरी क्रोम में इसी तरह की समस्या हल हो जाती है।

Answer 2

मेरे पास कुछ समान समस्याएं थीं, और मुझे हल करने का एकमात्र तरीका यह था कि इसे हमेशा दिखाने के लिए वेबकिट स्क्रॉलबार में कुछ विशेष शैलियों को लागू करना था। अपने उदाहरण के साथ http://jsfiddle.net/sinspiral/pTkQL/ देखें।

यह प्लेटफार्म संगत नहीं है (विंडोज़ के रूप में यह उन शैलियों को भी लागू करेगा), इसलिए आपको यह पता लगाने की आवश्यकता हो सकती है कि यह कौन सा ओएस चल रहा है।

.left::-webkit-scrollbar{ 
    -webkit-appearance: none; 
} 

.left::-webkit-scrollbar-thumb { 
    background-color: rgba(50, 50, 50, .5); 
    border: 3px solid transparent; 
    border-radius: 9px; 
    background-clip: content-box; 
} 

.left::-webkit-scrollbar-track { 
    background-color: rgba(100, 100, 100, .5); 
    width: 15px; 
}