Chrome错误？内容无法正确呈现多列 [英] Chrome bug? Content not rendering multi-columns properly
问题描述
我有这个代码：
http：// jsfiddle.net/zqdLzya2/
这是一个简单的3列布局。
当您悬停某个项目时，其中一些闪烁或只是消失了一秒钟。另外，当内容向上移动时，它超过标题，消失并呈现正常。当您滚动时，也会出现一些闪烁。
$ b
更新1
$ b
当没有 CSS转换或转换时，元素停止闪烁。
更新2
元素停止闪烁或在没有转换的情况下做任何疯狂的事情，所以我删除了阅读更多按钮。
< hr>
更新3
此处报告错误：
https://code.google.com/p/chromium/issues/detail?id = 460222
我在Opera，Firefox和Safari上尝试过相同的代码，
这是一个Chrome错误吗？
这里有一些截图：
这是我裸露的HTML代码：
< div id =newsclass =span-image-title clear content-wrapper>
<！ - this element repeats - >
< div class =item>
< div class =desc bgwhite pdd>
< h4 class =title-font lightblue> [标题可以是一行标题或五]< / h4>
< p class =text-color> 2015年1月2日< / p>
< / div>
< div class =imagestyle =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。破裂，借位。< / p>
< / div>
< a href =＃class =blue-btn title-font uppercase lightblue inline-block>阅读更多< / a>
< / div>
< / div>
< / div>
< / div>
<！ - this elements repeat - >
< / div>
这是我的SCSS代码：
@mixin break-inside（$ content）{
break-inside：$ content;
-webkit-column-break-inside：$ content;
}
@mixin列（$ 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轻松透明度0.3s，
opacity：0;
}
.desc-body {
@include transition（0.6s底部，0.3s轻松背景颜色）;
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位）。
这是添加 transform：translateZ（0）到我的 .item 元素启用硬件加速。
I have this code:
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.
The temporary solution for this was adding transform: translateZ(0) to my .item element as this enable hardware acceleration.
这篇关于Chrome错误？内容无法正确呈现多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
