Buggy CSS animate (transition) a element inside a column?

Question

Is there any known issue when making a CSS transition to elements inside columns?

I've problems in webkit (Safari and Chrome), didn't test others...

I've made a simple demo where a transition is applied (on hover) to a image that sits inside columns. The problem happens on all columns except the first, it won't render the applied filter or the transition.

The first column works as expected, and if I remove the columns also render ok.

This is a relevant part of the 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

If you need "absolute" positioned elements in the columns, you will need that "relative" postition.

At Google Code there is a solution under "Issue 177556: Opacity transitions fail in CSS columns"

Don't remove position:relative, just add this:

-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 Version: Version 35.0.1916.114 m

---

EDIT : You can also add :

display:inline-block;

(it solved one of my issues, when using :after css selector on child elements.)

Answer 2

Apart from the rendering/flickering problems due to the columns, I figured out that the position:relative; of your divs cause the transition render problem. If you want to keep up with this layout try to style the div content without position:absolute;.