मैं एक पृष्ठभूमि परत जो ठीक, पृष्ठ है कि एक पर अन्य तत्वों के साथ तथापि, यह पैदा समस्याओं से काम करता है के रूप में एक HTML5 वीडियो तत्व का उपयोग कर रहा संपत्ति background-attachment: fixed के साथ पृष्ठभूमि छवि। पृष्ठभूमि छवियां अनावृत हो जाती हैं, टूट जाती हैं, या पूरी तरह गायब हो जाती हैं। यदि मैं वीडियो रैपर div के जेड-इंडेक्स को कुछ सकारात्मक में बदलता हूं तो समस्या गायब हो जाती है लेकिन यह पृष्ठभूमि परत के रूप में इसका उपयोग करने के उद्देश्य को हरा देती है। यह समस्या केवल वेबकिट ब्राउज़र (क्रोम और सफारी) में होती है।निरपेक्ष नकारात्मक z- सूचकांक टूट के साथ HTML5 वीडियो तत्व तैनात वेबकिट ब्राउज़रों में पृष्ठभूमि लगाव
<section class="fixed-background">
<p>...</p>
</section>
<section>
<div class="video-background">
<video loop autoplay muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>
<p>...</p>
</section>
<section class="fixed-background">
<p>...</p>
</section>
और सीएसएस:
.fixed-background {
background: url('image.jpg') center center;
background-size: cover;
background-attachment: fixed;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.video-background video {
min-width: 100%;
min-height: 100%;
}
मैं एक नमूना JSFiddle है कि समस्या को दिखाता है बना लिया है
यहाँ मूल HTML है। फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन क्रोम/सफारी में टूट जाता है।
क्या आपको कभी इसके लिए कोई फिक्स मिल गया है? क्या यह कोरी था? –
@LeeProbert प्रदान किए गए उत्तरों में से कोई भी मेरे विशेष मामले के लिए समस्या को ठीक नहीं करता है। समस्या अब सफारी के मौजूदा संस्करणों में मौजूद नहीं है, हालांकि, क्रोम (44.0.2403) में अभी भी निश्चित पृष्ठभूमि को चित्रित करने में समस्याएं हैं। – WhiskerSandwich