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