Image in second and third column randomly disappear on hover

Question

EDIT: Occurs in Chrome.

I have a masonry layout with multiple columns.

Problem: Whenever I hover over any image in the second or third column (stretch browser) the image disappears for some time.

Example: Here's Jennifer Aniston (Woman in middle of second row disappearing on hover).

This is how it should be:

JSFiddle for easy access: https://jsfiddle.net/RohitTigga/3bvdhozc/2/

Code Below:

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wrapper {
  width: 92.5%;
  padding: 1em;
  margin: 0 auto;

}

.masonry {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
}
.masonry .brick {
  margin-bottom: 30px;
}

.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

  //with react
  margin: 20px 0px;

}

.masonry .brick:hover img {
  //opacity: .75;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.masonry.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}
.masonry.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry.gutterless .brick {
  margin-bottom: 0;
}

@media only screen and (min-width: 1024px) {
  .wrapper {
    width: 80%;
    padding: 2em;
  }

  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .wrapper {
    width: 85%;
    padding: 1.5em;
  }

  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

HTML Below:

<div class="wrapper">
    <h1 class="FredokaOne quote">Life's too short to wear boring clothes.</h1>

    <div class="masonry">
        <div class="brick">
            <img src="https://images6.alphacoders.com/307/307794.jpg">
        </div>
        <div class="brick">
            <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg">
        </div>
        <div class="brick">
            <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg">
        </div>
        <div class="brick">
            <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg">
        </div>
        <div class="brick">
            <img src="http://www.billboard.com/files/styles/article_main_image/public/media/nicki-minaj-bb38-fea-2015-billboard-650.jpg">
        </div>
        <div class="brick">
            <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg">
        </div>
        <div class="brick">
            <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg">
        </div>
        <div class="brick">
            <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg">
        </div>
        <div class="brick">
            <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg">
        </div>
        <div class="brick">
            <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg">
        </div>
        <div class="brick">
            <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg">
        </div>
        <div class="brick">
            <img src="https://images6.alphacoders.com/307/307794.jpg">
        </div>
        <div class="brick">
            <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg">
        </div>
        <div class="brick">
            <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg">
        </div>
        <div class="brick">
            <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg">
        </div>
        <div class="brick">
            <img src="http://www.returnofkings.com/wp-content/uploads/2014/05/Barney-Stinson.png">
        </div>
        <div class="brick">
            <img src="http://cdn-media-1.lifehack.org/wp-content/files/2014/09/ted-mosby.jpg">
        </div>
        <div class="brick">
            <img src="https://nancyicurtis.files.wordpress.com/2015/08/header3.jpg">
        </div>
        <div class="brick">
            <img src="http://cdn.playbuzz.com/cdn/afb9c20a-a28d-42c5-a7eb-2b9e01299b71/49e9a846-49ea-4233-8db6-cb0f65041de9.png">
        </div>
        <div class="brick">
            <img src="http://legendsrevealed.com/entertainment/wp-content/uploads/2015/11/lily2.jpg">
        </div>

    </div>
</div>

Why is this occurring and how can this be resolved?

Answer 1

The problem is that you're transitioning from no property to transform: scale(1.1), transition assumes there are two values in which define a initial state and an end state to the transition. That causes that strange flickering and disappearing of the images when the effect alternates

Check the following updated fiddle.

But basically adding this to your .masonry .brick img class, will to the trick:

.masonry .brick img {
  /* transition stuff */

  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1); 
}

Hope it helps!

Cheers.

---

EDIT: Ok, apparently there is also a bug on chrome that using column with scaled containers makes them act as overflow: hidden was active and, therefore, cut the image on the limit of the wrapper that the columns are defined.

The workaround I found was (wait for it...) to include -webkit-backface-visibility: hidden; to the .masonry class as such:

.masonry {
    -webkit-backface-visibility: hidden; /* actual workaround */
    backface-visibility: hidden; /* perhaps this is not needed */
}

Check the updated fiddle for details. EDIT: previous link was wrong.