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 for a second. Also when content moves up it goes over the title, disappear and renders fine. Some blinking also occurs when you scroll. Content is displayed fine but does not render.

---

Update 1

Elements stop blinking when there's no CSS transition or transform.

---

Update 2

Elements stop blinking or doing anything crazy when there's no transform so I've removed the read more button.

---

Update 3

Bug has been reported here: https://code.google.com/p/chromium/issues/detail?id=460222

---

I've tried the same code on Opera, Firefox and Safari and they all seem to render fine.

Is this a Chrome bug?

Here some screenshots:

Here is my naked HTML code:

<div id="news" class="span-image-title clear content-wrapper">

        <!-- this element repeats -->
        <div class="item">

            <div class="desc bgwhite pdd">
                <h4 class="title-font lightblue">[title goes could be one line title or five]</h4>
                <p class="text-color">2th of January, 2015</p>
            </div>

            <div class="image" style="background-image:url('[image go here, changes with each item]');"></div>

            <div class="desc-body">
                <div class="table-wrap">
                    <div class="table-cell">
                        <div class="entry-content pdd">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, debitis.</p>
                        </div>
                        <a href="#" class="blue-btn title-font uppercase lightblue inline-block">Read More</a>
                    </div>

                </div>
            </div>

        </div>
       <!--    this elements repeat -->


</div>

Here is my SCSS code:

@mixin break-inside($content){
break-inside:                   $content;
-webkit-column-break-inside:    $content;
}


@mixin columns($count: 3, $gap: 10){

-webkit-column-count: $count;
-moz-column-count:    $count;
column-count:         $count;

-webkit-column-gap:   $gap;
-moz-column-gap:      $gap;
column-gap:           $gap;

}

.span-image-title {

@include columns(3,1rem);

.item { 
    @include break-inside(avoid);
    display: inline-block;
    position:relative; 
    overflow: hidden;
    width:100%; 
    margin-bottom:rem(15px); 
}

.item:hover {
    .desc-body {
        @include transition( 0.6s ease bottom , 0.3s ease background-color 0.2s );
        bottom:0;
        background-color:#f4f4f4;
    }
    .desc {
        // @include transition( 0.3s ease border-bottom 0.5s );
        // border-bottom:1px solid $text-color;
    }
    .entry-content,
    .blue-btn {
        opacity: 1;
    }
}

.image {
    height:370px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.desc {
    position: relative;
    z-index:5;
    // border-bottom:1px solid transparent;
}

.entry-content,
.blue-btn {
    @include transition( 0.5s ease opacity 0.3s , 0.3s ease transform );
    opacity: 0;
}

.desc-body {
    @include transition( 0.6s ease bottom , 0.3s ease background-color );
    margin:0 auto;
    bottom:-100%;
    position: absolute;
    width:100%;
    height:100%;
    margin:0 auto;
    background-color:rgba(255,255,255,0.4);

}


}

I am using: Version 40.0.2214.111 (64-bit) on Yosemite.

Answer 1

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

Answer 2

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.