0

i've encountered an unusual behavior. See sample gif below.

enter image description here

As seen above, images on the right hand side correctly performs the ease-out of filter effect on the image. Other images does not. It affects the Image caption, it hides then after it finishes easing out the filter effect, the captions is displayed again.

This only occurs in chrome browser. Currently, my chrome is at Version 70.0.3538.77 (Official Build) (64-bit).

I've tested this both on IE and FF, the above issue does not occur.

Anyone of guys encountered this problem? If yes, how did you resolve this problem?

See below my sample source (.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;
}
lemoncodes
  • 2,371
  • 11
  • 40
  • 66
  • probably related : https://stackoverflow.com/questions/47914821/image-moves-on-hover-when-changing-filter-in-chrome/47959946#47959946 chrome has some issue with filter ... try `blur(0.5px)` instead of `blur(0)` – Temani Afif Oct 28 '18 at 08:55
  • hmm, tried it. does not work. it may be due to my media class. i maybe wrong but when i removed the media class div, it worked. there maybe something wrong with it. its completely out of topic with my question. im still tracing. – lemoncodes Oct 28 '18 at 08:59
  • I put your code in [a fiddle](https://jsfiddle.net/MrLister/8srcmnot/6/), but the effect you describe (the text disappearing while the blurring is going on) does not occur in Chrome 69 or 72. Is this not enough code to demonstrate the problem, or am I doing something wrong? – Mr Lister Oct 28 '18 at 09:14
  • By the way, you can't have the `transition` property twice (or any property); the second one will replace the first, i.e. you won't have the filter transitioned. – Mr Lister Oct 28 '18 at 09:16
  • @MrLister, saw your fiddle, yes source code is the same, applied your css to mine, still occurs. By the way, the media object, is it suppose to have a width like that? i was expecting that its width will follow its parent (card) – lemoncodes Oct 28 '18 at 09:30
  • Also, some entries on my page has no problem. Only thing is that there are also some that don't work properly, and that is my issue. As you can see in the image above, some images works and some don't – lemoncodes Oct 28 '18 at 09:31
  • Tried to update my media object, the filter effect worked as it should. But i can't understand why is it about media object. I just fixed the width to follow its parent. – lemoncodes Oct 28 '18 at 09:57
  • If some entries work and some don't, we need to take a look at both kinds of entries. Would you be able to make a [mcve]? Or if that is infeasible, provide a link to the page where the problem is. – Mr Lister Oct 28 '18 at 10:37

1 Answers1

0

For those with the same unusual problem with mine. I fixed this when i fixed the media object that is inside the card. After that, it fixed the issue.

I really don't what happen why it broke, but i am still figuring it out.

lemoncodes
  • 2,371
  • 11
  • 40
  • 66