I came across a strange issue. Check out the sample gif below.
https://i.sstatic.net/VonaW.gif
In the gif above, you can see that the images on the right-hand side correctly apply the ease-out filter effect. However, the other images do not. This issue affects the image captions - they disappear and then reappear after the filter effect has finished easing out.
This strange behavior is only happening in the Chrome browser. Currently, my Chrome version is
Version 70.0.3538.77 (Official Build) (64-bit)I tested this on IE and FF, and the issue did not occur in those browsers.
Have any of you experienced this problem? If so, how did you solve it?
Below is a sample of my source code (.html and .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;
}