css - CSS 背景ブレンド モードが適用されない

Question

2 つの div があります。1 つは全画面の背景画像、もう 1 つはマークアップ付きのバーです。

<div class="home">
    <div class="home-bar">
    </div>
</div>

home.barクラスにブレンド効果を持たせようscreenとしていますが、これを次のようにしようとしています

.home{
    position:absolute;
    z-index:-99;
    bottom:70px;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    background-color: transparent;
    background-image:url('img/home-hero.jpg');
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}

.home-bar{
    position:absolute;
    height:150px;
    width:100%;
    bottom:20px;
    background-color:red;
    background-blend-mode: screen;
}

しかし、私は望ましい効果を得ることができません。.home の上に .home-bar を表示するにはどうすればよいですか?