html - Chrome上的CSS模糊滤镜中断

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



如上所示，右侧的图像正确地减轻了图像上的滤镜效果。其他图像则没有。它会影响图像标题，将其隐藏，然后在完成缓和滤镜效果后将其再次显示。

这仅在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;
}

最佳答案

对于那些与我有同样异常问题的人。修复card内部的媒体对象时，已修复此问题。之后，它解决了该问题。

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

关于html - Chrome上的CSS模糊滤镜中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53029753/