weird color stain from css

Question

I've coded it in css where if you hover over a div it expands and show more details about the div, the issue is that whenever I remove the mouse some of the color is still left as lines, I'll attach a picture.

This is the css code where movie card is the details and movie is the div to hover on

.movie-card{
  transition: 500ms ease-in-out;
  background-color: #a851ff;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #a851ff;
}

.movie-box-content:hover .movie-card{
  transition-delay: 250ms;
  transition-duration: 500ms;
  visibility: visible;
  opacity: 1;
}

This is the result of hovering over:

And this is after removing the mouse over it:

its worth noting that after I scroll once, all the lines get removed.

Could you put up a minimal working snippet that shows the problem. — A Haworth, Jan 23 '21 at 21:16
sure, I uploaded it to code pen: https://codepen.io/marwantukhta/pen/QWKRomj — Marwan Tukhta, Jan 23 '21 at 22:11

score 0 · Answer 1 · answered Jan 23 '21 at 21:08

0

I don't think it's necessary to have both visibility and opacity change as they essentially achieve the same thing. As you have a general transition set on the class, perhaps the two are interfering with each other.

answered Jan 23 '21 at 21:08

Ffion

559
3
16

This answer https://stackoverflow.com/a/34529598/7659075 may also be useful for determining whether to use 'display', 'visibility' or 'opacity' – Ffion Jan 23 '21 at 21:18
I added visibility because the icons movie-card is clickable so adding visibility: hidden takes care of that, on the other hand opacity is there because I want a smooth transition and I can't achieve that with the visibility property and opacity alone is not enough because the clickable icons are still there and can be clicked. with that being said I remove the visibility property just to test it and the problem still occurs. – Marwan Tukhta Jan 23 '21 at 21:41
Upon seeing your codepen, I am wondering if the scale transform is also causing issues. I found this answer, and wonder if it might help you: https://stackoverflow.com/questions/25799480/css-transition-on-element-leaving-lines – Ffion Jan 23 '21 at 22:24
I tried backface-visibility: hidden and -webkit-transform: translateZ(0) both did not fix the problem. – Marwan Tukhta Jan 23 '21 at 22:35

score 0 · Accepted Answer · answered Jan 23 '21 at 23:09

Removing the transition: 500ms ease-in-out; from the movie-card class gets rid of the spurious 'shadows'.

  .movie-box {
    position: relative;
    display: block;
    width: 300px;
    height: 168.75px;
    
  }

  .movie-box-content {
    transform: scale(1);
    transition: 500ms ease-in-out;
    background-image: url('https://wallpaperaccess.com/full/1508305.jpg');
    background-repeat: no-repeat;
    background-size: 300px 168.75px;
    width: 100%;
    height: 100%;
    rborder-radius: 2%;
  }

  .movie-box-content:hover {
    transition-delay: 250ms;
    transition-duration: 500ms;
    transform: scale(1.3);
    border: 1px solid #a851ff;
    box-shadow: #a851ff;

  }

  .movie-card {
    /* transition: 500ms ease-in-out;*/
    background-color: #a851ff;
    opacity: 0;
    visibility: hidden;
    
  }

  .movie-box-content:hover .movie-card {
    transition-delay: 250ms;
    transition-duration: 500ms;
    visibility: visible;
    opacity: 1;
    
  }

<div class="movie-box">
  <div class="movie-box-content">

    <div style="width: 100%; height: 100%;"></div>

    <div class="movie-card hidden">

      <div class="text-center">
        <strong>Drama, psycho, crime</strong>
      </div>
    </div>
  </div>

</div>

There is the question of whether this alters anything else visually.

Incidentally, changing scale(1.2) to scale(i) where i is an integer also seemed to remove the problem which perhaps indicates difficulty with mapping CSS pixels (which can take up several display pixels each) so that as the div scales down it 'leaves behind' parts of the CSS pixel. It would be good if someone could explain this phenomenon.

you are right removing the transition does fix the problem but does not achieve the same effect, I think you are absolutely right about the pixel mapping, it seems like achieving the desired effect causes issues in CSS so I might use jquery instead sense I'm using bootstrap anyway, thanks. — Marwan Tukhta, Jan 23 '21 at 23:25

weird color stain from css

2 Answers2