Buggy CSS动画(转换)列中的元素？

Question

在向列内的元素进行CSS转换时是否存在任何已知问题？

我在webkit(Safari和Chrome)中遇到问题,没有测试其他人...

我做了一个简单的演示,其中应用了一个转换(在悬停时)到位于列内的图像.问题发生在除第一列之外的所有列上,它不会渲染应用的过滤器或过渡.

第一列按预期工作,如果我删除列也渲染正常.

这是CSS的相关部分:

#photos img {
  width:              100% !important;
  height:             auto !important;
  opacity:            1;
  -webkit-filter:     blur(0);
  -webkit-transition: all 200ms ease-in;
}

#photos div:hover img {
  opacity:            0.25;
  -webkit-filter:     blur(2px);
  -webkit-transition: all 200ms ease-in;
}

Answer 1

如果列中需要"绝对"定位元素,则需要"相对"定位.

在谷歌代码有下一个解决方案" 问题177556:不透明度过渡在CSS列失败 "

不要删除position:relative,只需添加:

-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
-webkit-backface-visibility:hidden;

Chrome版本:版本35.0.1916.114 m

编辑:您还可以添加:

display:inline-block;

(当:after在子元素上使用css选择器时,它解决了我的一个问题.)