Probleme beim Mischen im Mischmodus

Question

Ich habe versucht, den Mischmodus auf einer Seite zu verwenden, die Instanzen von css-Opazitätsübergängen enthält. Es scheint, dass das div mit dem Mix-Blend-Modus so angezeigt wird, wie es ohne den Blend-Modus während des Übergangs oder während der Animation der Fall wäre. Ich habe es nur in Chrome als Problem gefunden.

In meinem Beispiel, während die Div-Umwandlung der Blend-Modus wird korrekt über das Bild angezeigt, aber nicht über den Hintergrund der Seite. Sobald der Übergang abgeschlossen ist, kehrt er zur Anzeige zurück, wie er sollte. Mit anderen Worten, das Blended-Div erscheint auf dem schwarzen Hintergrund während der laufenden Animation als solides Gelb, aber da es auf dunkel gestellt ist, sollte es über dem schwarzen Hintergrund unsichtbar sein. Sobald die Animation beendet ist, erscheint sie wie sie sollte. Es erscheint normal über das Bild.

Ich habe versucht, das ist Firefox und Safari und es scheint kein Problem zu sein.

Pen: http://codepen.io/anon/pen/QGGVOX

Bearbeiten - Ich habe eine andere Instanz gefunden, wo dies geschieht, dass keine Animation beinhaltet. Seltsamerweise passiert es, wenn die Position eines Divs auf fix eingestellt ist, während das andere absolut ist, siehe hier: http://codepen.io/anon/pen/wooRME Wenn die Position des div.image auf absolut geändert wird, erscheint der Blend-Modus normal.

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

Also, ich denke, ich dachte, das Problem. Während der Animation scheint es, dass der Körper nicht als Element zählt und das Gelb daher bei 1 Deckkraft erscheint. Ich habe mit anderen Blend-Modus getestet und es erscheint immer gelb. (Wenn 'Differenz' eingestellt ist, wird das erwartete Ergebnis weiß statt gelb sein)

Also die Lösung? fügen Sie einfach ein div mit 100% Größen und einem schwarzen Hintergrund hinzu! Dann hat das Gelb etwas, das sich einfügt und nicht auftaucht.

Hier ist der Code, der in dem Stift gearbeitet:

html - die bg div hinzugefügt:

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

es ist CSS:

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

Ich habe auch den Körper um das Fenster zu füllen also war der Rand nicht auch gelb. Alternativ könnte die Mischung div in Funktion des Körpers bemessen werden.

Tagging @chrscbls, da sie wissen wollten, ob Sie etwas gefunden haben.

---

EDIT:

Für die anderen codepen das Problem war nicht das gleiche tho. Sie versuchten ein Bild und ein gelbes Rechteck auf einen grauen Hintergrund abzudunkeln.

Wenn sie nicht wollten, dass das Gelb auf ihrem grauen Hintergrund angezeigt wird, bestand die Lösung einfach darin, das Bild in ein div zu setzen und :: :: nachher zu verwenden, um eine Farbe einzufügen. Oder mach einfach ein leeres Div, gib ihm das Bild als Hintergrund und benutze das :: after.

dies:

<div/> 

mit:

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

oder dies:

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

ohne das 'Hintergrundbild' im div css.