CSS3 过滤器在 Edge 中不起作用

Question

查看此页面http://www.urbansportsleague.org/gallery 在悬停时在边缘显示黑色 space。

这是下面的代码，您可以查看并告诉我。

提前致谢。

.gallery-img {

  height: 250px;

  padding: 10px;

  -webkit-filter: blur(0.5px);

}

.gallery-img>img {

  max-height: 200px;

  width: auto;

  -webkit-transform: rotateY(180deg);

}

.gallery-img>img:hover {

  -webkit-filter: contrast(150%);

  /* Chrome, Safari, Opera */

  filter: contrast(150%);

}

<div class="col-md-4 col-sm-6  gallery-img">
  <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/1.jpg" />
</div>
<div class="col-md-4 col-sm-6  gallery-img">
  <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/2.jpg" />
</div>

Answer 1

CSS 过滤器根据其在 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/ 的文档受 Edge 支持。自 2015 年 11 月更新以来一直提供支持。

有趣的是，对于您的代码片段，过滤器对我有用，但在 http://www.urbansportsleague.org/gallery 上，如果我不删除 .gallery-img > img 上的 -webkit-transform: rotateY(180deg); 规则，它就不起作用。当这些东西结合起来时，Edge 会不会有点 bug？是的，Edge 也读到 -webkit-transform 因为许多网站忘记包含等效的 transform 规则。

我还尝试删除不应影响过滤器行为的其他 CSS。仅删除 Bootstrap 和背景后，我使页面进入了一个损坏的状态，过滤器在大多数情况下都可以正常工作。有时图像只是消失了。有时，在对图像应用滤镜几分之一秒后图像就消失了。

CSS3 过滤器在 Edge 中不起作用

CSS3 filter not working in Edge

css

filter

microsoft-edge