Я не уверен, что это ошибка вебкит-рендеринга или что-то еще; У меня есть сетка стиля Masonary с множеством разных изображений. Я настроил его так, что, когда вы наводите на них указатель на рабочем столе, div с текстом соскальзывает (текст постоянно отображается на мобильных устройствах). Все работает прекрасно, за исключением Chrome и Safari, текст слайд-шоу работает только в первом столбце, когда вы наводите курсор на изображения в любом другом столбце, текст никогда не скользит, и я не знаю, почему (отлично работает в IE и FF)CSS div slide on hover
.gallery{
\t -webkit-column-count:5;
\t -moz-column-count:5;
\t column-count:5;
\t -moz-column-gap:1em;
\t column-gap:1em;
\t margin-top:7%;
\t padding-bottom:5%;
\t }
.item{
\t display:inline-block;
\t width:100%;
\t height:auto;
\t position:relative;
\t overflow:hidden;
\t }
.description {
\t position:absolute;
\t bottom:-100px;
\t left: 0;
\t width:100%;
\t font-family:Archivo Narrow;
\t z-index: 1000;
\t -webkit-transition:all 0.6s ease;
\t transition:all 0.6s ease;
\t }
.description_text {
\t background-color: rgba(0,0,0,.7);
\t padding:10px;
\t top:0;
\t z-index:4;
\t -webkit-transition:opacity.2s;
\t -moz-transition:opacity.2s;
\t -o-transition:opacity.2s;
\t transition:opacity.2s;
\t color: #fff;
\t }
img:hover + .description{
\t bottom:0;
\t }<div class="gallery">
\t <div class="item">
\t \t <img src="building1.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 1</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building2.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 2</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building3.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 3</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <a href="#"><img src="building4.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 4</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </a>
\t </div>
\t <div class="item">
\t \t <img src="building5.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 5</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building6.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 6</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building7.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 7</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building8.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 8</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
\t <div class="item">
\t \t <img src="building9.jpg" />
\t \t \t <div class="description">
\t \t \t \t <div class="description_text">
\t \t \t \t \t <p>Building 9</p>
\t \t \t \t \t <p>London EC2</p>
\t \t \t \t </div>
\t \t \t </div>
\t </div>
</div>в этом случае первый столбец отображает изображения 1-6 остальные находятся во втором столбце, который является, где переход перестает работать. Есть идеи?
На рисунке я попытался выделить текст DIV, который скользит вверх (это если из jsfiddle Седрика, как вы можете видеть в Chrome ДИВ только для просмотра на первых двух изображений, но это не есть на отдых и эффект парения не работает
Может быть ошибка в Chrome? Проделали некоторое время, играя вокруг без везения, но есть зарегистрированные ошибки webkit против модуля столбцов и позиционированных элементов. – Jeff
То, что я думаю, но я только что протестировал в Safari, который повторяет те же проблемы, что и Chrome, и видя, что они используют -webkit-engine, это должно быть так - Спасибо за попытку, просто рад, что я не единственный, вопрос – html5css3