Режим CSS Background Blend не применяется

Question

У меня есть два div, один полноэкранный фоновое изображение, другой полоса с разметкой, как это.

<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-bar для отображения поверх.home?