Chromeのミックスブレンドモードの問題

Question

私は、混在モードをCSSの不透明なトランジションのインスタンスを含むページで使用しようとしていました。何が起こっているように見えるのは、ミックスブレンドモードを含むdivは、トランジション中、またはアニメーションが進行中のブレンドモードなしで表示されるということです。私はそれがChromeの問題であることがわかっただけです。

私の例では、divが画像を正しく表示するが、ページの背景には表示されません。移行が完了すると、必要に応じて表示に戻ります。言い換えれば、ブレンドされたdivは、アニメーションの進行中は黒い背景に黄色で表示されますが、黒く設定されているため黒の背景には見えません。アニメーションが終了すると、アニメーションが表示されます。画像上では正常に表示されます。

これはFirefoxとSafariを試しましたが、問題はないようです。

ペン：http://codepen.io/anon/pen/QGGVOX

編集 - 私は、これは任意のアニメーションを伴わないことに発生する別のインスタンスを見つけました。奇妙なことに、一方のdivの位置がfixedに設定されているときに他方が絶対的に設定されている場合はこちらをご覧ください：​​div .imageの位置がabsoluteに変更されると、blend-modeは正常に見えます。

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を追加するだけです！そして、黄色は混ざり合って見えなくなります。

ここにあなたのペンで働いていたコードがあります：

HTML - BGのDIVを追加しました：

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

それはCSSです：

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

私も窓を埋めるために身体を変更マージンも黄色ではありませんでした。あるいは、ブレンドdivは、ボディの関数としてサイズを決めることができます。

タグ@chrscbllsあなたが何かを見つけたかどうかを知りたいと思っていたからです。

---

EDIT

：問題codepenその他については

は同じカントーませんでした。彼らは灰色の背景に画像と黄色の長方形を暗くしようとしていました。

灰色の背景に黄色が表示されないようにするには、単純に画像をdivに入れ、:: afterを使用して色を混ぜるだけでした。または空のdivを作成して、背景としてイメージを与え、:: afterを使用します。

これ：

<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のCSSの '背景画像' 無し。