Chrome 上的 CSS 模糊过滤器中断答案

【问题标题】：CSS blur filter breaks on ChromeChrome 上的 CSS 模糊过滤器中断
【发布时间】：2019-04-01 10:55:48
【问题描述】：

我遇到了异常行为。请参阅下面的示例 gif。

如上所示，右侧的图像正确地对图像执行了渐出滤镜效果。其他图片没有。它会影响图像标题，它会隐藏，然后在完成过滤效果后，标题会再次显示。

这只发生在 chrome 浏览器中。目前，我的 chrome 位于Version 70.0.3538.77 (Official Build) (64-bit)。

我在 IE 和 FF 上都测试过，没有出现上述问题。

有人遇到过这个问题吗？如果是，您是如何解决这个问题的？

请看下面我的示例源代码（.html 和 .css）

HTML

<nav class="navbar navbar-dark bg-primary text-white fixed-top">
    <a class="navbar-brand">{{ title }}</a>
</nav>
<button type="button" class="btn btn-danger btn-lg add-wish" (click)="openModal()"><i class="material-icons">add</i></button>
<div class="home">
    <div class="card-columns">
      <div class="card  border-light bg-dark text-white" *ngFor="let post of posts" (click)="openModal()">
        <img class="card-img" src="{{ post.picture }}" alt="Card image">
        <div class="card-img-overlay">
          <div class="media">
            <img class="align-self-center mr-3 rounded-circle" src="../../../assets/blank.jpg" alt="Generic placeholder image" style="width: 50px; height: 50px;">
            <div class="media-body">
              <h5 class="mt-0">{{post.text}}</h5>
              <p class="mb-0" >
                <span class="d-inline-block text-truncate" style="max-width: 13%;">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span>
              </p>
            </div>
          </div>
          <p class="card-text">Last updated 3 mins ago</p>
        </div>
      </div>
    </div>
</div>

CSS

img.card-img {
  opacity: 0.5;
  filter: blur(2px);
}

.card:hover > .card-img {
  opacity: 1;
  filter: blur(0px);
  transition: filter 1s ease-out;
  transition: opacity 1s ease-out;
}

【问题讨论】：

可能相关：stackoverflow.com/questions/47914821/… chrome 过滤器存在问题...尝试使用blur(0.5px) 而不是blur(0)
嗯，试过了。不起作用。这可能是由于我的媒体课。我可能错了，但是当我删除媒体类 div 时，它起作用了。它可能有问题。它与我的问题完全无关。我还在追踪。
我把你的代码放在了a fiddle，但是你描述的效果（在模糊的时候文本消失了）在 Chrome 69 或 72 中没有出现。这还不足以证明问题，还是我做错了什么？
顺便说一句，你不能拥有transition属性两次（或任何属性）；第二个将替换第一个，即您不会转换过滤器。
@MrLister，看到你的小提琴，是的，源代码是一样的，将你的 css 应用到我的，仍然发生。顺便说一句，媒体对象是否应该有这样的宽度？我期待它的宽度会跟随它的父（卡片）

标签： html css bootstrap-4

【解决方案1】：

对于那些与我有同样不寻常问题的人。当我修复 card 内的媒体对象时，我修复了这个问题。之后，它解决了这个问题。

我真的不知道为什么它坏了，但我仍在弄清楚。

【讨论】：