Наложение оттенка фона не распространяется при прокрутке

Я пытаюсь создать оттенок на моем фоне модального окна, но не могу заставить его распространяться на всю высоту содержимого, если содержимое не помещается на странице и его нужно прокручивать. Оттенок идет только до высоты модального окна и не прокручивается.

Вот код модального окна:

<div class = "reveal recipeModal" id = "<?php echo $slug; ?>"  style = "background:url(<?php the_field('image'); ?>) center center;background-size: cover;" data-reveal data-animation-in = "fade-in" data-animation-out = "fade-out">

    <div class = "grid-container">
        <div class = "grid-x recipeDetails">
            <img src = "<?php the_field('image'); ?>" class = "printableImage" />
            <div class = "cell small-12 doubleUnderline"><h4><?php the_title(); ?></h4></div>
                <h6 class = "cell small-9 time">Start to Finish: <?php the_field('preparation_time'); ?></h6>
                <h6 class = "cell small-3 text-right servings">Servings: <?php the_field('servings'); ?></h6>
                <div class = "recipeInstructions">
                    <p><?php the_content(); ?></p>
                </div>
                <a href = "#"><button class = "button large printButton darkButton" style = "margin:0;" onclick = "window.print();return false;">Print Recipe</button></a>
            </div>   

        </div>   

        <button class = "close-button" data-close aria-label = "Close modal" type = "button">
            <span aria-hidden = "true">&times;</span>
        </button>
    <div class = "tint"></div>
</div>

И вот использованный на нем код sass:

.recipeModal{
    position: absolute;
    top: 50% !important;
    left: 50%;
    width: 75%;
    height:85%;
    transform: translate(-50%, -50%);
    .tint{
        width:100%;
        height:100%;
        position: fixed;
        top:0;
        left:0;
        padding:1em;
        background-color:rgba(0,0,0,0.5);
        z-index:10000;
    }
    .close-button:hover{
        color:$orange;
    }
    h4{
        color:white;
        text-transform: uppercase;
        border-bottom:10px solid white;
        font-weight: 900;
        font-size: 35px;
    }
    .recipeDetails{
        h6{
            text-transform: uppercase;
            color:white;
            font-weight: 500;
            margin-top: 15px;
        } 
        .recipeInstructions{
            strong{
                font-weight: 700;
                text-decoration: underline;
                font-size:25px;
            }
            color:white;
            font-size:20px;
            text-shadow: 1px 1px 5px #000000;
        }
    }
}

И вот проблема, которую я пытаюсь решить:

Как вы можете видеть на картинке, оттенок обрезается там, где начинается прокрутка (я не мог сделать снимок экрана всей страницы, потому что это сделало бы изображение слишком большим для загрузки)