क्रोम में मिश्रण-मिश्रण-मोड मुद्दे

Question

मैं एक पृष्ठ पर मिश्रण-मिश्रण-मोड का उपयोग करने का प्रयास कर रहा हूं जिसमें सीएसएस अस्पष्टता संक्रमण के उदाहरण शामिल हैं। ऐसा प्रतीत होता है कि मिश्रण-मिश्रण-मोड युक्त div जिसमें संक्रमण के दौरान मिश्रण मोड के बिना होगा, या इसके बजाय, जबकि एनीमेशन प्रगति पर है। मुझे केवल क्रोम में एक मुद्दा माना गया है।

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

मैंने कोशिश की है कि यह फ़ायरफ़ॉक्स और सफारी है और ऐसा कोई समस्या नहीं है।

पेन: http://codepen.io/anon/pen/QGGVOX

संपादित करें - मैं एक और उदाहरण है, जहां यह उत्पन्न हो रही है कि किसी भी एनीमेशन को शामिल नहीं करता पाया है। अजीब बात यह तब होती है जब एक div की स्थिति तय की जाती है जबकि दूसरा पूर्ण होता है, यहां देखें: http://codepen.io/anon/pen/wooRME यदि div .image की स्थिति पूर्ण हो जाती है तो मिश्रण-मोड सामान्य दिखाई देता है।

body { 
background: #000; 
} 

.blend { 
    height: 650px; 
    width: 50%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position: absolute; 
    opacity: 1; 
    left: 0; 
    top: 0px; 
    z-index: 100; 
} 

img { 
    position: relative; 
    z-index: 0; 
} 

Answer 1

तो, मुझे लगता है कि मुझे समस्या का पता चला। एनीमेशन के दौरान, ऐसा लगता है जैसे शरीर को तत्व के रूप में नहीं माना जाता है, इस प्रकार पीले रंग को 1 अस्पष्टता में दिखाई देता है। मैंने अन्य मिश्रण मोड के साथ परीक्षण किया और यह हमेशा पीला दिखाई देता है। (जब 'अपेक्षित परिणाम' पीले रंग के बजाय सफेद परिणाम अपेक्षित होगा)

तो ठीक है? बस 100% आकार और एक काला पृष्ठभूमि के साथ एक div जोड़ें! फिर, पीले रंग में कुछ मिश्रण होता है और दिखाई नहीं देता है।

यहाँ कोड है कि अपनी कलम में काम किया है:

एचटीएमएल - bg div इससे जोड़ा गया:

.bg{ 
    background: #000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
body { 
    background: #000; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

मैं भी खिड़की को भरने के लिए शरीर बदल दिया है:

<div class="bg"></div> 
<div class="blend"></div> 
<img src="http://lorempixel.com/500/500/"> 

यह सीएसएस है तो मार्जिन भी पीला नहीं था। वैकल्पिक रूप से, मिश्रण div शरीर के कार्य में आकार दिया जा सकता है।

टैगिंग @chrscblls क्योंकि वे जानना चाहते थे कि आपको कुछ मिला है या नहीं।

---

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

समस्या codepen अन्य के लिए एक ही यद्यपि नहीं था। वे एक भूरे रंग की पृष्ठभूमि पर एक छवि और एक पीले आयत को अंधेरे करने की कोशिश कर रहे थे।

यदि वे पीले रंग की भूरे रंग की पृष्ठभूमि पर दिखाना नहीं चाहते थे, तो समाधान केवल एक div के अंदर छवि डालने और रंग में मिश्रण करने के बाद :: का उपयोग करने के लिए था। या यहां तक ​​कि केवल एक खाली div बनाओ, इसे पृष्ठभूमि के रूप में छवि दें और बाद में :: का उपयोग करें।

इस:

<div/> 

साथ:

body { 
    background: #333; 
} 

div{ 
    position:fixed; 
    width: 500px; 
    height: 500px; 
    top:50px; 
    left: 50px; 
    mix-blend-mode: darken; 
    background-image: url("http://lorempixel.com/500/500/"); 
} 
div::after { 
    content: ""; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position:absolute; 
    opacity: 1; 
    left: 0; 
    top: 0; 
} 

या इस:

<div><img src="http://lorempixel.com/500/500/"></div> 

div सीएसएस में 'पृष्ठभूमि छवि' के बिना।