Really strange error found in CSS columns
So, I was playing with columns and stumbled upon a really weird flaw when I included the hover image.
On the left side of the column, the hover effect is fully functional. ... but on the right side of the column, the hover effect is disabled.
I double checked to see if this was my code or the way I expanded it, but I couldn't find any errors.
Has anyone else experienced this problem? If so, have you found any solutions to fix this strange event?
I created 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 the delete solution -webkit-backface-visibility: hidden;
seems to move everything, however when the cursor moves quickly and quickly across the image it stops working. Still looking for a solution.
source to share
I see a lot of related posts about webkit and freeze issues. But none of the solutions seem to work for this problem.
Through some experimentation, I came up with JavaScript code that 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 appears to cause the images to "wake up" to the hover event.
source to share
The problem is related to this line:
-webkit-backface-visibility: hidden;
/* Fix for transition flickering */
When I remove it from the jsfiddle ( http://jsfiddle.net/d3tm39ra/2/ ) the hover effect works fine.
why doesn't it allow you to work with freezing? Sorry, I do not know.
source to share