javascript - 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.