Фоновое наложение не распространяется на прокрутку

Question

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

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

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

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

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