Problemy z trybem mieszania blendów w przeglądarce Chrome

Question

Próbuję użyć trybu mieszania-mixu na stronie zawierającej wystąpienia przejść przezroczystości css. Wygląda na to, że element div zawierający tryb mix-mix wyświetla się tak, jak w przypadku przejścia bez trybu mieszania, a raczej podczas animacji. Odkryłem, że jest to problem w Chrome.

W moim przykładzie, gdy element div transformuje tryb mieszania, wyświetla się poprawnie na obrazie, ale nie na tle strony. Po zakończeniu przejścia wraca do wyświetlania tak, jak powinno. Innymi słowy, mieszany div pojawia się jako stały żółty na czarnym tle, podczas gdy animacja jest w toku, ale ponieważ jest przyciemniona, powinna być niewidoczna na czarnym tle. Po zakończeniu animacji pojawia się tak, jak powinna. Wygląda normalnie nad obrazem.

Próbowałem tego jest Firefox i Safari i wydaje się, że nie ma problemu.

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

Edit - Znalazłem inną instancję gdzie ten występujący która nie wymaga żadnej animacji. Dziwnie się to dzieje, gdy pozycja jednego elementu div ma wartość stałą, a druga jest bezwzględna, patrz tutaj: http://codepen.io/anon/pen/wooRME Jeśli położenie elementu div .image zmieni się na bezwzględne, wówczas tryb mieszania wygląda normalnie.

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

Więc, myślę, że wymyśliłem problem. Podczas animacji wygląda na to, że ciało nie jest liczone jako element, co powoduje, że kolor żółty pojawia się przy 1 nieprzezroczystości. Testowałem w innym trybie mieszania i zawsze wydaje się żółty. (gdy ustawiona na "różnica oczekiwany wynik będzie biały zamiast żółtego)

Więc naprawić? po prostu dodaj element div w 100% rozmiarach i czarnym tle! Następnie żółty ma coś, co się miesza i nie pojawia.

Oto kod, który pracował w swoim piórem:

html - dodał bg div:

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

to css:

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

Ja również zmienił ciało wypełnić okno więc marża też nie była żółta. Alternatywnie, mieszanka div może mieć wymiary dopasowane do funkcji ciała.

oznaczanie @chrscblls, ponieważ chcieli wiedzieć, czy coś znaleźliście.

---

EDIT:

Na drugi codepen problemu nie było to samo tho. Próbowali przyciemnić obraz i żółty prostokąt na szarym tle.

Jeśli nie życzyli sobie, aby żółć pokazywała się na szarym tle, rozwiązaniem było po prostu wstawienie obrazu do elementu div i użycie opcji :: after, aby połączyć kolor. Lub po prostu zrób pusty div, nadaj mu obraz jako tło i użyj :: after.

to:

<div/> 

z:

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

czy to:

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

bez 'background-image' w div css.