CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Abmenzel
Abmenzel

Reputation: 88

Image/div flicker on hover in google chrome

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.com/work/

HTML:

<body class="blue4">
    <div class="content">
        <div class="work-item blue4">
            <a href="http://www.youtube.com/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);
});

Upvotes: 2

Views: 4611

Answers (2)

LEMONed
LEMONed

Reputation: 21

I use translate3D instead of translateX:

img {-webkit-transform: translate3D(0,0,0);}

Upvotes: 2

enguerranws
enguerranws

Reputation: 8233

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

Upvotes: 6

Related Questions