Img "flicking" with column-count

Question

I have a display bug in the gallery on my website with Google Chrome and Safari. With column-count I create 3 columns. But the first image shown in column 2 and 3 is not displayed correctly. When I hover-over the image a kind of "flickering" arises. How often, I do not have this bug in Mozilla Firefox or MS Edge.

Demo

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>-tag created by Wordpress automaticly.

The `
` WordPress insert doesn't make a difference. I've created a Fiddle that demos the problem without any CMS. https://jsfiddle.net/twigmac/xpvt214o/890303/ Have you had any solution to this? — twigmac, Oct 18 '18 at 11:19

score 0 · Answer 1 · answered Oct 10 '18 at 23:18

Have you tried manually activating hover state on an image that works as you want it to, versus one that does not work as you want it to?

Instructions here: "Inspect" a hover element?

I don't know your code well enough to get anything super useful out of this, but you might get a clue from this that I lack the knowledge to get. You can definitely see different behavior between images in the first column, versus those in the 2nd and 3rd columns.

This method may help you because you can see just one hover transition. It looks to me like when I hover with my mouse cursor, there are several transitions, making it harder to see what's going on.

Img "flicking" with column-count

1 Answers1