Css转换不适用于网格答案

【问题标题】：Css transform not working with gridCss转换不适用于网格
【发布时间】：2016-06-15 13:26:05
【问题描述】：

为什么第二列和第三列不能正常工作。

我只会对图像应用效果，但缩放不起作用。

至于用chrome浏览器一栏的图片变白了。

我的代码

<ul>
<li>
<div class="mask">
  <img src="http://2.bp.blogspot.com/-HRWsU2uJbgw/UOllw5oCL5I/AAAAAAAAB9c/NbG0Q3Tb8PI/s1600/love_colorful-1920x1080.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
<li>
<div class="mask">
  <img src="http://media-cache-ec0.pinimg.com/736x/c3/10/22/c3102281f88237e7a2515099d2e6651f.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
<li>
<div class="mask">
  <img src="http://media-cache-ec0.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
<li>
<div class="mask">
  <img src="http://media-cache-ak0.pinimg.com/736x/2e/7f/db/2e7fdb7ed765973407fed0b0141bb126.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
<li>
<div class="mask">
  <img src="http://media-cache-ec0.pinimg.com/736x/0f/d0/84/0fd0847f7b48e5f16d896f62baa31b97.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
<li>
<div class="mask">
  <img src="http://media-cache-ec0.pinimg.com/600x/97/35/91/97359142dce582b4530cb0f23fbe2e43.jpg">
  <span>Lorem ipsum dolor sit amet</span>
  </div>
</li>
</ul>

ul{-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;list-style:none;}
ul li{display:inline-block;background:#fff;margin-bottom:10px;}
ul li:hover img{-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;-o-transition:all 0.6s ease 0s;-ms-transition:all 0.6s ease 0s;transition:all 0.6s ease 0s;}
ul li img{width:100%;}
ul li .mask{overflow:hidden;}

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

我承认我不知道为什么这可行，但 Chrome 在处理 CSS 列时似乎有一个错误......但基于此 ANSWER 添加 Z 翻译和 -webkit-margin-top-collapse:discard;图像可能会提供一些缓解。

ul li:hover img {
  transform: scale(1.4) translateZ(0);
  transition: transform 0.6s ease 0s;
  -webkit-margin-top-collapse:discard;
}

JSfiddle Demo

【讨论】：