Really bizarre flaw found in CSS columns

Question

So I was playing around with columns and stumbled on a really strange flaw when I incorporated a hover-over image.

On the left side of the column, the hover-over effect works completely fine. ...but on the right side of the column, the hover-over effect is disabled.

I doubled checked to see if it was my code or the way I laid it out, but I couldn't find any errors.

Has anyone else experienced this issue as well? If so, did you find any solutions to fix this bizarre happening?

I've set up a jsfiddle here.

CSS:

.column {
    margin-top: 5%;
    -moz-column-count: 2;
    -moz-column-gap: 30px;
    -webkit-column-count: 2;
    -webkit-column-gap: 30px;
    column-count: 2;
    column-gap: 30px;
}
img.grayscale {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease;
    /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden;
    /* Fix for transition flickering */
    clear: both;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
}
img.grayscale:hover {
    -webkit-filter: grayscale(10%);
}

HTML:

<ul class="column">
 <li>text...</li>
 <img class="grayscale" src="http://i57.tinypic.com/2i9p8go.jpg" width="80%" height="auto" />
 <li>...text</li>
<ul>

EDIT 01 @Richard Parnaby-King solution of removing -webkit-backface-visibility: hidden; seems to get things moving, however, when the cursor hovers back and forth on the image at a rapid pace, it stops working. Still looking for a solution.

Looks like it's working fine in Chrome. It's worth noting that an `img` element must not be a direct child of a `ul` element. `ul` elements may only contain `li` children. Looking at your JSFiddle demo, the same applies to `h2` elements. — James Donnelly, Nov 24 '14 at 11:25
Which browser? I thought I could see the issue too, but then I clicked and scrolled a little and everything seems to work fine, even after a refresh of the page. Also using Chrome. — GolezTrol, Nov 24 '14 at 11:26
It seems to work for me. Just checked what James meant and you seem to have left an img and h2 tag outside of an li element. These should be in their own li's on both columns and this could be the cause for which ever browser you are using. — CheckeredMichael, Nov 24 '14 at 11:27
Sometimes working and sometimes not working for me :/. Really bizarre (_check by reloading page continuously_). When it is not working, I just opened the console and it started working for me. — Mr_Green, Nov 24 '14 at 11:33
James Donnelly — So weird, I'm using the most updated version of Chrome and it's not working for me... GolezTrol — I'm using Chrome Version 38.0.2125.122 (newest version). but that shouldn't matter because I would want this to work on all browsers. benni_mac_b — Would you mind telling me what browser you're using? @James Donnelly I'm currently using Chrome. Here is an updated version, but now when I move away my cursor and back rapidly, the hoverover effect doesn't work. Would you mind taking a look? http://jsfiddle.net/kenhimself/d3tm39ra/3/ — kenhimself, Nov 24 '14 at 11:37

score 3 · Answer 1 · answered Nov 24 '14 at 11:30

3

The issue appears to be due to this line:

-webkit-backface-visibility: hidden;
/* Fix for transition flickering */

When I delete it from the jsfiddle (http://jsfiddle.net/d3tm39ra/2/) then the hover effect works fine.

why does it stop the hover effect from working? Sorry, I don't know.

answered Nov 24 '14 at 11:30

Richard Parnaby-King

14,703
11
69
129

1

Hi @Richard Parnaby-King — Thank you for your feedback! However, when I rapidly shift back cursor back and forth over the image, it doesn't seem to hover-over anymore. Any way I can fix this? – kenhimself Nov 24 '14 at 11:47

score 2 · Accepted Answer · answered Nov 24 '14 at 15:00

2

I'm seeing a lot of somewhat-related posts to problems with webkit and hover. But none of the solutions seem to work for this problem.

Through some experimentation, I've come up with some JavaScript code, which seems to fix the problem:

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].style.width=  img[i].clientWidth+'px';
}

This apparently causes the images to "wake up" to the hover event.

Fiddle

answered Nov 24 '14 at 15:00

Rick Hitchcock

35,202
5
48
79

Hi @Rick Hitchcock -- More strange behaviors: When I call the images from a local root (ex: ) the grayscale doesn't work... Any idea as of how this can be solved? – kenhimself Nov 24 '14 at 21:23
Hmm, I'm unable to duplicate that. The grayscale class doesn't seem to work in IE, but I assume you're still testing in Chrome? – Rick Hitchcock Nov 24 '14 at 22:05
yup, still using Chrome.. Sigh this is so difficult. – kenhimself Nov 24 '14 at 22:08
It's certainly a bizarre issue. I've tested with a local file as well as a file in my server's root folder, and the `grayscale` class works regardless (using Chrome). – Rick Hitchcock Nov 24 '14 at 22:19
Have you made sure the image is set on the second column? The first column works—the problem is it won't correspond with the columns that follow. – kenhimself Nov 24 '14 at 22:23
Yes, I see an image in each column, and the grayscale class works for both (as does the hover effect). – Rick Hitchcock Nov 24 '14 at 22:25
1

You know, I think until column-count and filter become compatible, we should all stick to working with two divs that have equal width. Thanks for the help all, really appreciate it! – kenhimself Nov 24 '14 at 22:36

Really bizarre flaw found in CSS columns

2 Answers2