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.
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.