Chrome bug? Content not rendering multi-columns properly

Question

I have this code:

http://jsfiddle.net/zqdLzya2/

Which is a dead simple 3-column layout.

When you hover an item some of them blink or just disappear f

Answer 1

transform: translateZ(0); works as Miguel Garrido suggested. However, it creates a problem of position: absolute; elements overlapping / underlapping (if that's a word).

Using transform-style: preserve-3d; eliminates this problem. Hope this helps someone else until the browsers fix it themselves.

Answer 2

The temporary solution for this was adding transform: translateZ(0) to my .item element as this enable hardware acceleration.

Answer 3

Looks like adding position: relative to the transformed children elements helped a little, in addition to transform: translateZ(0) to parent element. Still some artefacts in transitions though... Very weird bug !

Answer 4

This is not really an answer to the particular bug described here (blinking/disappearing content), but it's closely related.

I was helping a friend dealing with misaligned columns in Chrome/Safari. There were three columns and the third had phantom space above it. When we tried transform:translateZ(0) and other null transform solutions, the content did disappear, so that was out.

At one point he mentioned having had the idea that maybe someone had typed something into the space in the CMS, and that got me thinking about white-space, word-wrap, etc. We tried white-space:nowrap and then white-space:normal on the children, and various other related solutions, but they didn't work out.

Then he had the idea to put a negative margin on the third column div only in Chrome/Safari somehow, and that led to our discovery of this property I've never heard of before, and this wacky solution: -webkit-margin-top-collapse:discard.

Hope this helps some poor soul one day.