title: linear-gradient not working in IE or Edge
body: <p>So I have a div that has an image as the background. When I hover I want the black gradient to appear so if there is a white image being used as the background you can still see the text.</p>
  
  <p>Example (Chrome, Opera, Firefox) :</p>
  
  <p><a href="https://i.stack.imgur.com/OsBnK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OsBnK.png" alt="enter image description here"></a></p>
  
  <p>Now this all works well on Chrome, Opera and Firefox. But... on IE and Edge the top gradient does not appear.</p>
  
  <p>Example (IE, Edge) :</p>
  
  <p><a href="https://i.stack.imgur.com/QrH1r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrH1r.png" alt="enter image description here"></a></p>
  
  <p>As you can see the bottom image is missing the top gradient.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="articleContainer"&gt;
      &lt;a href="{% url 'section_article_detail' article.section.slug article.slug %}"&gt;
          {% if 'video' in article.get_tags %}
          &lt;i class="far fa-play-circle"&gt;&lt;/i&gt;
          {% else %}
          &lt;i class="fas fa-align-left"&gt;&lt;/i&gt;
          {% endif %}
          &lt;div class="infoBackground"&gt;&lt;/div&gt;
          &lt;div id="cookingInfoContainerSide"&gt;
              &lt;div class="cookingInfoItemSide"&gt;
                  &lt;img src="{% static 'publicnfx/images/prep-inverted.png' %}" alt=""&gt;
                  &lt;div class="cookingInfoTextSide"&gt;
                      {% if article.recipe.maximum_preparation_time &gt; 60 %}
                      &lt;p class="timeSide"&gt;60+ &lt;/p&gt;
                      &lt;p&gt;mins&lt;/p&gt;
                      {% else %}
                      &lt;p class="timeSide"&gt;{{ article.recipe.maximum_preparation_time }} &lt;/p&gt;
                      &lt;p&gt;mins&lt;/p&gt;
                      {% endif %}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cookingInfoItemSide"&gt;
                  &lt;img src="{% static 'publicnfx/images/cooking-inverted.png' %}" alt=""&gt;
                  &lt;div class="cookingInfoTextSide"&gt;
                      {% if article.recipe.maximum_cooking_time &gt; 90 %}
                      &lt;p class="timeSide"&gt;90+ &lt;/p&gt;
                      &lt;p&gt;mins&lt;/p&gt;
                      {% else %}
                      &lt;p class="timeSide"&gt;{{ article.recipe.maximum_cooking_time }}&lt;/p&gt;
                      &lt;p&gt;mins&lt;/p&gt;
                      {% endif %}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="cookingInfoItemSide"&gt;
                  &lt;img src="{% static 'publicnfx/images/serves-inverted.png' %}" alt=""&gt;
                  &lt;div class="cookingInfoTextSide"&gt;
                      &lt;p class="timeSide"&gt;{{ article.recipe.maximum_serves }} &lt;/p&gt;
                      &lt;p&gt;people&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;img
              src="{{ article.get_thumbnails|varkey:'featured' }}"
              alt="{{ article.title }}"
              onerror="this.src='/static/publicnfx/images/Cranble-Logo.png'"
              class="article-image"
              &gt;
          &lt;p class="articleTitle realTitle"&gt;{{ article.title }}&lt;/p&gt;
          {% if article.subtitle == "" %}
          &lt;p class="articleTitle clickbait"&gt;{{ article.title }}&lt;/p&gt;
          {% else %}
          &lt;p class="articleTitle clickbait"&gt;{{ article.subtitle }}&lt;/p&gt;
          {% endif %}
          &lt;div class="articleDescIE"&gt;
              &lt;p class="articleDesc"&gt;{{ article.description|truncatechars:100 }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  
  </code></pre>