I'm animating the images so that when hovered over the opacity goes up to 1, that part is working perfectly fine however when images are hovered over in chrome the 2nd column flickers a tiny bit to the side. I've tested it in IE and Firefox aswell and have no issues.
Check it for yourself here: /
HTML:
<body class="blue4">
<div class="content">
<div class="work-item blue4">
<a href="" title="Template#2 Intro"><img src="img/Template-2-Intro.png"/></a>
</div>
</div>
</body>
CSS:
.work-item{
width:25%;
opacity:0.8;
overflow:hidden;
display:block;
float:left;
}
img{
width:100%
}
.work-item:hover{
opacity:1;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
I'm also using a script to set the height equal to the dynamic width, which might have something to do with it but I am unsure..
SCRIPT:
$(function() {
var div = $('.work-item');
var width = div.width();
div.css('height', width-5);
});
I'm animating the images so that when hovered over the opacity goes up to 1, that part is working perfectly fine however when images are hovered over in chrome the 2nd column flickers a tiny bit to the side. I've tested it in IE and Firefox aswell and have no issues.
Check it for yourself here: http://abmenzel./work/
HTML:
<body class="blue4">
<div class="content">
<div class="work-item blue4">
<a href="http://www.youtube./watch?v=SbjEgqPmtAs" title="Template#2 Intro"><img src="img/Template-2-Intro.png"/></a>
</div>
</div>
</body>
CSS:
.work-item{
width:25%;
opacity:0.8;
overflow:hidden;
display:block;
float:left;
}
img{
width:100%
}
.work-item:hover{
opacity:1;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
I'm also using a script to set the height equal to the dynamic width, which might have something to do with it but I am unsure..
SCRIPT:
$(function() {
var div = $('.work-item');
var width = div.width();
div.css('height', width-5);
});
- 1 Try it in Safari, it's also a Webkit browser so you should get similar results. Also, I'm in Chrome and I don't see any problems. – lincb Commented Dec 28, 2013 at 16:33
- The problem is your page width not being evenly divided with 25%, so one of the columns get 1px less than the others. if you give .work-item a fixed width same as height the flicker disappears. unfortunately you need to use % value to make it responsive so a better way is to set overflow:hidden to hide the scroll bar(this will give you the extra pixel you need) and make a tiny version of scroll bar or a metro style scroll bar – Godinall Commented Dec 28, 2013 at 16:57
2 Answers
Reset to default 6First of all, put your transition properties in normal element, not on :hover state. Then, if you need only transition on opacity, use :
opacity 0.2s ease-in-out 0s
That flicker is a known bug in Webkit browsers, it happens when you animate opacity on fluid elements (here 25%). Here's a workaround:
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
I know it sounds like a hack, but it works...
I use translate3D instead of translateX:
img {-webkit-transform: translate3D(0,0,0);}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742420806a4440641.html
评论列表（0条）