【发布时间】：2015-04-20 04:04:52
【问题描述】：
我有这个代码：
这是一个非常简单的 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);
}
}
我正在使用： Yosemite 上的版本 40.0.2214.111（64 位）。
【问题讨论】：
-
它适用于 Chromium 42.0.2294.0
-
可能是媒体查询问题？ FWIW，默认情况下，jsfiddle 在 Linux 上的
Chrome Version 40.0.2214.111 (64-bit)和Firefox 35.0.1中看起来都是正确的，但是如果我将“结果”窗口拖得更大，它会在两者上中断（中心下降）。 -
我已经下载了
Chromium 42，问题依然存在。当您滚动或悬停元素时，CSS“有效”但“渲染”失败。当我删除transitions或transforms时，Chrome 呈现没有问题只是。 -
可以确认。版本 40.0.2214.94 m 上存在问题
-
相关问题：在 Chrome 中，可点击元素不适用于除第一个以外的列。
标签： javascript html css google-chrome