Html Buggy CSS是否为列中的元素设置动画（转换）？

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

我在webkit（Safari和Chrome）中遇到问题，没有测试其他人

我已经对位于列中的图像进行了转换（悬停）。问题发生在除第一列之外的所有列上，它不会呈现应用的过滤器或转换

第一列按预期工作，如果删除这些列，也会呈现ok

这是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;
}

---

除了由于列引起的渲染/闪烁问题之外，我还发现

位置：relativediv的code>会导致过渡渲染问题。
如果你想跟上这个布局，尝试在没有
position:absolute的情况下设置div内容的样式
如果需要列中的“绝对”定位元素，则需要该“相对”位置

在Google代码中，在“”下有一个解决方案

不要删除
位置：相对
，只需添加以下内容：

-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选择器时，它解决了我的一个问题。）
位置：绝对的问题将破坏列布局。或者也许我不明白你的建议……删除
位置：relative从
div
s。这将使你的过渡工作。这应该是标记的答案。实际标记的一个根本不起作用。这个答案为我节省了大量的工作，解决了一个非常奇怪的Chrome问题。Sams的道具。只需添加
-webkit背面可见性：隐藏到为我工作的项目。感谢