линейный градиент не работает в IE или Edge

Question

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

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

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

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

AsВы видите, что на нижнем изображении отсутствует верхний градиент.

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