Linear-gradient не работает в IE или Edge

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

Пример (Chrome, Opera, Firefox):

Теперь все это хорошо работает в Chrome, Opera и Firefox. Но... в IE и Edge верхний градиент не появляется.

Пример (IE, Edge):

Как видите, на нижнем изображении отсутствует верхний градиент.

HTML:

<div class = "articleContainer">
    <a href = "{% url 'section_article_detail' article.section.slug article.slug %}">
        {% if 'video' in article.get_tags %}
        <i class = "far fa-play-circle"></i>
        {% else %}
        <i class = "fas fa-align-left"></i>
        {% endif %}
        <div class = "infoBackground"></div>
        <div id = "cookingInfoContainerSide">
            <div class = "cookingInfoItemSide">
                <img src = "{% static 'publicnfx/images/prep-inverted.png' %}" alt = "">
                <div class = "cookingInfoTextSide">
                    {% if article.recipe.maximum_preparation_time > 60 %}
                    <p class = "timeSide">60+ </p>
                    <p>mins</p>
                    {% else %}
                    <p class = "timeSide">{{ article.recipe.maximum_preparation_time }} </p>
                    <p>mins</p>
                    {% endif %}
                </div>
            </div>
            <div class = "cookingInfoItemSide">
                <img src = "{% static 'publicnfx/images/cooking-inverted.png' %}" alt = "">
                <div class = "cookingInfoTextSide">
                    {% if article.recipe.maximum_cooking_time > 90 %}
                    <p class = "timeSide">90+ </p>
                    <p>mins</p>
                    {% else %}
                    <p class = "timeSide">{{ article.recipe.maximum_cooking_time }}</p>
                    <p>mins</p>
                    {% endif %}
                </div>
            </div>
            <div class = "cookingInfoItemSide">
                <img src = "{% static 'publicnfx/images/serves-inverted.png' %}" alt = "">
                <div class = "cookingInfoTextSide">
                    <p class = "timeSide">{{ article.recipe.maximum_serves }} </p>
                    <p>people</p>
                </div>
            </div>
        </div>
        <img
            src = "{{ article.get_thumbnails|varkey:'featured' }}"
            alt = "{{ article.title }}"
            onerror = "this.src='/static/publicnfx/images/Cranble-Logo.png'"
            class = "article-image"
            >
        <p class = "articleTitle realTitle">{{ article.title }}</p>
        {% if article.subtitle == "" %}
        <p class = "articleTitle clickbait">{{ article.title }}</p>
        {% else %}
        <p class = "articleTitle clickbait">{{ article.subtitle }}</p>
        {% endif %}
        <div class = "articleDescIE">
            <p class = "articleDesc">{{ article.description|truncatechars:100 }}</p>
        </div>
    </a>
</div>

CSS:

.infoBackground {
    transition: .3s;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: absolute;
    width: 100.5%;
    height: 100px;
    right: -1px;
    /* top: 0px; */
    z-index: 0;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 8%, rgba(0,0,0,0.48) 29%, rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.48) 29%,rgba(0,0,0,0.32) 55%,rgba(0,0,0,0.2) 75%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 8%,rgba(0,0,0,0.48) 29%,rgba(0,0,0,0.32) 55%,rgba(0,0,0,0.2) 75%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
}

.articleContainer:hover .infoBackground {
    opacity: 1;
}