Img "стряхивая" с количеством столбцов - PullRequest
Новая
       30

Img "стряхивая" с количеством столбцов

0 голосов
/ 11 октября 2018

У меня есть ошибка отображения в галерее на моем сайте с Google Chrome и Safari.С column-count я создаю 3 столбца.Но первое изображение, показанное в столбцах 2 и 3, отображается неправильно.При наведении курсора на изображение возникает своего рода «мерцание».Как часто у меня нет этой ошибки в Mozilla Firefox или MS Edge.

Демо

HTML: 

<div id="gallery_box">
<p>
<img src=".../img01.jpg" />
<img src=".../img02.jpg" />
[...]
<img src=".../img30.jpg" />
</p>
</div>

CSS: 

gallery_box {
column-count: 3;
column-gap: 0;
text-align: center;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
}

gallery_box p {
margin: 0;
padding: 0;
}

gallery_box img {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
display: block;
max-width: 97%;
margin: 0 0 4% 0;
opacity: 0.9;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

gallery_box img:hover {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
opacity: 1.0;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

<p> - тег, созданный Wordpress автоматически.

1 Ответ

0 голосов
/ 11 октября 2018

Вы пытались вручную активировать состояние наведения на изображении, которое работает так, как вы хотите, или на том, которое не работает так, как вы хотите?

Инструкции здесь: «Осмотреть» наведение мышиelement?

Я не знаю ваш код достаточно хорошо, чтобы извлечь из этого что-то сверх полезное, но вы можете понять, что мне не хватает знаний.Вы определенно можете увидеть различное поведение между изображениями в первом столбце по сравнению с изображениями во втором и третьем столбцах.

Этот метод может помочь вам, потому что вы видите только один переход при наведении.Мне кажется, что когда я наведу курсор мыши, происходит несколько переходов, что усложняет наблюдение за происходящим.

...