admin管理员组文章数量:1336660
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);}
本文标签： javascriptImagediv flicker on hover in google chromeStack Overflow
版权声明：本文标题：javascript - Imagediv flicker on hover in google chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742420806a2471615.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论