Question

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

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

我已将a simple demo设置为（在悬停时）应用到位于列内的图像。问题发生在除第一列之外的所有列上，它不会渲染应用的过滤器或过渡。

第一列按预期工作，如果我删除列也会渲染确定。

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

如果列中需要“绝对”定位元素，则需要“相对”位置。

在Google Code上，“Issue 177556: Opacity transitions fail in CSS columns”

下有一个解决方案

请勿删除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选择器时，它解决了我的一个问题。）

Answer 2

除了列引起的渲染/闪烁问题之外，我发现position:relative;的{{1}}会导致转换渲染问题。如果您想跟上此布局，请尝试使用div设置div内容的样式。

Buggy CSS动画（转换）列中的元素？

2 个答案: