Chrome bug？内容无法正确呈现多列

Question

我有这个代码:

http://jsfiddle.net/zqdLzya2/

这是一个简单的3列布局.

当您悬停某个项目时,其中一些项目会闪烁或只是消失一秒钟.此外,当内容向上移动时,它会越过标题,消失并呈现正常.滚动时也会发生一些闪烁.内容显示正常但不呈现.

---

更新1

当没有CSS transition或时,元素停止闪烁transform.

---

更新2

元素停止闪烁或做任何事情都没有,transform所以我已经删除了更多按钮.

---

更新3

此处已报告错误:https: //code.google.com/p/chromium/issues/detail？id = 460222

---

我在Opera,Firefox和Safari上尝试过相同的代码,它们似乎都很好.

这是Chrome错误吗？

这里有一些截图:

这是我的裸HTML代码:

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

这是我的SCSS代码:

@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);

}


}

我正在使用:优胜美地的版本40.0.2214.111(64位).

Answer 1

对此的临时解决方案是添加transform: translateZ(0)到我的.item元素,因为这启用了硬件加速.