Ответ 1
Временное решение для этого заключалось в добавлении transform: translateZ(0)
к моему элементу .item
, поскольку это включает аппаратное ускорение.
У меня есть этот код:
Это мертвый простой трехколоночный макет.
При наведении элемента некоторые из них мигают или просто исчезают на секунду. Кроме того, когда контент перемещается вверх, он переходит по заголовку, исчезает и визуализируется. Некоторые мигания также возникают при прокрутке. Содержимое отображается отлично, но не отображается.
Обновление 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-разрядная версия) на Yosemite.
Временное решение для этого заключалось в добавлении transform: translateZ(0)
к моему элементу .item
, поскольку это включает аппаратное ускорение.
На самом деле это не ответ на конкретную ошибку, описанную здесь (мигающий/исчезающий контент), но он тесно связан.
Я помогал другу работать с несогласованными столбцами в Chrome/Safari. Было три столбца, а у третьего было phantom пространство над ним. Когда мы попытались преобразовать: translateZ (0) и другие решения с нулевым преобразованием, содержимое сделало, исчезло.
В какой-то момент он упомянул о том, что, возможно, кто-то набрал что-то в пространстве в CMS, и это заставило меня задуматься о белом пространстве, обертке и т.д. Мы попробовали white-space: nowrap, а затем белое пространство: нормальное для детей и различные другие связанные решения, но они не сработали.
Тогда у него возникла идея поместить отрицательный запас на третий столбец div только в Chrome/Safari каким-то образом, и это привело к нашему обнаружению этого свойства, о котором я никогда не слышал, и это дурацкое решение: -webkit рентабельность-топ-коллапс:. отбрасывания
Надеюсь, что это поможет некоторым бедным душам в один прекрасный день.
Похоже, добавление position: relative
к преобразованным дочерним элементам немного помогло в дополнение к transform: translateZ(0)
к родительскому элементу. Тем не менее некоторые артефакты в переходах, хотя... Очень странная ошибка!
transform: translateZ(0);
работает, как предложил Мигель Гарридо. Тем не менее, это создает проблему элементов position: absolute;
, перекрывающих/скрывающих (если это слово).
Использование transform-style: preserve-3d;
устраняет эту проблему.
Надеюсь, это поможет кому-то еще, пока браузеры не исправят его сами.