javascript - Chrome 错误？内容无法正确呈现多列

Question

我有这个代码:

http://jsfiddle.net/zqdLzya2/

这是一个非常简单的 3 列布局。

当您将鼠标悬停在某个元素上时，其中一些元素会闪烁或消失一秒钟。此外，当内容向上移动时，它会越过标题，消失并呈现良好。滚动时也会出现一些闪烁。内容显示正常但不呈现。

---

更新 1

当没有 CSS transition 或 transform 时，元素将停止闪烁。

---

更新 2

当没有 transform 时，元素会停止闪烁或做任何疯狂的事情，所以我删除了 read more 按钮。

---

更新 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);

}


}

我正在使用: Yosemite 上的版本 40.0.2214.111(64 位)。

Answer 1

临时解决方案是将 transform: translateZ(0) 添加到我的 .item 元素中，因为这可以启用硬件加速。