Chrome上的CSS模糊滤镜中断

Question

我遇到了异常行为。请参见下面的示例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;
}

Answer 1

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

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