具有背景图片的伪元素上的CSS过渡在IE中不起作用

Question

我不知道为什么CSS过渡在IE（以及可能的其他浏览器/版本）中的背景图像上的：after伪元素上似乎不起作用。如果将鼠标悬停在IE中的compute_fixed_hash中的元素上，您会注意到兄弟元素右下角的颜色变化渐变过渡没有延迟。

另一个说明： -过渡似乎适用于具有CSS渐变的伪元素，而不是IE中的渐变背景图片，但不适用于Chrome。

CSS：

       body::after {
     position: absolute;
     width: 0;
     height: 0;
     overflow: hidden;
     z-index: -4;
     content: url(https://gallery.mailchimp.com/10a692be53069f74335c86f52/images/58a059b7-876f-417f-aad4-6754e6fc9e5f.png);
   }

   body,
   html,
   .customcontainer2 {
     position: relative;
     z-index: -3;
   }

   body {
     height: 100%;
   }

   .responsiveelement {
     font: 13px/1.9 Lato, Arial;
     text-align: center;
     display: table-cell;
     width: 32%;
     max-width: 480px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
     -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
     -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
     border-radius: 4px;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
     vertical-align: top;
     z-index: 0;
     background: #fff;
     visibility: visible;
   }

   .responsivetable {
     display: table;
     position: relative;
     min-height: 100%;
     table-layout: fixed;
     margin: 0 0 20px;
     font: 0/0 Lato;
     list-style: none;
     padding: 0;
     z-index: -1;
   }

   .captiontext {
     padding: 0 5%;
     text-align: left;
     color: #606060;
     overflow: hidden;
     max-height: 147.7px;
     height: auto;
     position: relative;
   }

   .captiontext p,
   .captiontext h2 {
     -moz-transition: all 0.2s;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
   }

   .celldivider {
     display: table-cell;
   }

   p {
     margin: 0;
   }

   h2 {
     font: 18px/1.5 Lato;
     font-weight: 900;
     padding: 0 0 15px;
     margin: 0;
     color: #000;
   }

   .active.responsiveelement:hover {
     box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
     -moz-box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
     -webkit-box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
   }

   .articletext {
     max-height: inherit;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
   }

   .articletext:after {
     content: "";
     text-align: right;
     position: absolute;
     bottom: 0;
     right: 0;
     width: 50%;
     height: 24.7px;
     background: url('https://gallery.mailchimp.com/10a692be53069f74335c86f52/images/40b7abe2-9bb2-4e4e-b4a8-c486c0254e3e.png');
     background-size: 100% 100%;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
   }

   .blocklink {
     display: block;
     text-decoration: none;
     color: inherit;
     height: 100%;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     padding: 0 0 74px;
     *padding: 0;
   }

   .blocklink,
   .captiontext{
     z-index: 1;
   }

   .blocklink:hover {
     text-decoration: none;
     color: inherit;
   }

   .customcontainer2 {
     visibility: hidden;
   }

   .customcontainer2:hover .blocklink {
     background: rgba(0, 0, 0, 0.03);
   }

   .customcontainer2:hover .blocklink .articletext:after {
     background: url('https://gallery.mailchimp.com/10a692be53069f74335c86f52/images/58a059b7-876f-417f-aad4-6754e6fc9e5f.png');
     background-size: 100% 100%;
   }

   .customcontainer2 .blocklink:hover .articletext:after {
     background: url('https://gallery.mailchimp.com/10a692be53069f74335c86f52/images/40b7abe2-9bb2-4e4e-b4a8-c486c0254e3e.png');
     background-size: 100% 100%;
   }

   .blocklink {
     display: block;
     text-decoration: none;
     color: inherit;
     height: 100%;
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     padding: 0 0 50px;
   }

   .customcontainer2:hover .blocklink {
     background: rgba(0, 0, 0, 0.03);
   }
   .customcontainer2 .blocklink:hover {
     background: transparent;
   }

HTML：

        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,700i,900" rel="stylesheet" type="text/css">
    <div class="customcontainer2">
      <ul class="responsivetable">
        <li class="responsiveelement">
          <a class="blocklink" href="">
            <div class="captiontext">
              <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
              <p class="articletext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna lorem. Aenean nulla dolor, ultrices et commodo ut, consectetur sit amet nisi</p>
            </div>
          </a>
        </li>
        <li class="celldivider"></li>
        <li class="responsiveelement">
          <a class="blocklink" href="">
            <div class="captiontext">
              <h2>Lorem ipsum dolor sit amet, consectetur</h2>
              <p class="articletext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna lorem. Aenean nulla dolor, ultrices et commodo ut, consectetur sit amet nisi</p>
            </div>
          </a>
        </li>
        <li class="celldivider"></li>
        <li class="responsiveelement">
          <a class="blocklink">
            <div class="captiontext">
              <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris</h2>
              <p class="articletext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna lorem. Aenean nulla dolor, ultrices et commodo ut, consectetur sit amet nisi</p>
            </div>
          </a>
        </li>
      </ul>
    </div>