Question

编辑：在Chrome中发生。

我有一个多列的砌体布局。

问题：当我将鼠标悬停在第二列或第三列中的任何图像（拉伸浏览器）时，图像会消失一段时间。

示例：这是Jennifer Aniston（第二排中间的女人在悬停时消失）。

应该是这样的：

JSFiddle方便访问： https://jsfiddle.net/RohitTigga/3bvdhozc/2/

以下代码：

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下方：

<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>

为什么会发生这种情况？如何解决？

Answer 1

问题在于您从无属性转换为transform: scale(1.1)，转换assumes有两个值，其中定义了转换的初始状态和结束状态。当效果交替时，这会导致奇怪的闪烁和图像消失

检查以下updated fiddle。

但基本上将这个添加到你的.masonry .brick img课程中，将会有诀窍：

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

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

希望它有所帮助！

干杯。

<小时/> 编辑：好的，显然Chrome上还存在一个错误，即使用带缩放容器的列使它们充当overflow: hidden处于活动状态，因此，在包装器的限制下剪切图像列已定义。

我找到的解决方法是（等待它......）将-webkit-backface-visibility: hidden;包括在.masonry类中：

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

查看updated fiddle了解详情。 编辑：上一个链接错误。

Answer 2

将overflow: auto;添加到.brick（图片的父元素），即使使用最新的Chrome（7/1/2017），这也可以解决问题。注意：overflow: visible;无效。我有同样的问题，这个解决方法适合我，希望它会在你的。

第二列和第三列中的图像在悬停时随机消失

2 个答案: