Я столкнулся с необычным поведением.См. Пример 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;
}