当css过滤器应用父转换时，图像不会显示

Question

我在Edge浏览器上有一个奇怪的错误。

方案

我有一个应用于图像的滤镜，使其灰度和反转，在悬停在图像上时会被删除。但是这些仅在悬停“max-height”过渡到父容器时显示，因此它具有下拉效果。

问题

当父容器下降时，它只会部分呈现图像。在我的实际网站上，它可以加载10％到90％的图像，因为下拉的时间要长得多，而且这些图像位于底部，但是在下面的示例中，它只渲染图像的最顶层，所以你可以只是找出图像的顶部。

通过从父容器中删除transition或从图像中删除filter来解决此问题。看起来这两件事一起造成了这个问题。

实例（小提琴和片段）

JSFiddle

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: grey;
}

body:hover .sfHeader-companiesLinks {
  max-height: 200px;
}

.sfHeader-companiesLinks {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  height: 50px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94)
}

.sfHeader-companiesLink {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0px;
  -moz-box-flex: 1;
  -moz-flex: 1 0 0px;
  -ms-flex: 1 0 0px;
  flex: 1 0 0px;
  -webkit-filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
  filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50px;
  max-width: 150px;
  text-align: center;
}

.sfHeader-companiesLink:hover,
.sfHeader-companiesLink:active,
.sfHeader-companiesLink:focus {
  -webkit-filter: unset;
  filter: unset;
}

<p>Hover over the body</p>
<div class="sfHeader-companiesLinks">
  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/ebay"></a>

  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/amazon"></a>

  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/magento"></a>
</div>

尝试过的事情（失败了）

• 将图片设为img元素而非背景图片
• 仅在身体悬停时才使用过滤器

问题娱乐

我意识到也许那些水果味操作系统可能无法重现，所以我创建了一个动画GIF的问题：

结论

我正在寻找允许我保留此功能的任何解决方法。所有疯狂的建议都会被考虑在内！我很清楚，无论如何，过滤器在IE11中都不起作用。似乎在Chrome和Firefox中都能正常运行。谢谢。

Answer 1

最终，这一部分功能被删除了，但是Microsoft Edge团队现在已经开始了：

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10423235/