html - 当 css 过滤器应用于父转换时图像不显示

Question

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

场景

我在图像上应用了一个滤镜，使其成为灰度和倒置图像，将鼠标悬停在图像上时滤镜会被移除。然而，这些仅在悬停“最大高度”过渡到父容器时显示，因此它具有下拉效果。

问题

当父容器下拉时，它只渲染部分图像。在我的实时网站上，它可以加载图像的 10% 到 90% 之间的任何位置，因为下拉列表要长得多，而且这些图像位于底部，但是在我下面的示例中，它只呈现图像的最顶部，因此您可以只是找出图像的顶部。

通过从父容器中删除 transition 或从图像中删除 filter 可以解决此问题。看起来是这两件事共同导致了这个问题。

实例(Fiddle & Snippet)

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/