CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nikolay Talanov
Nikolay Talanov

Reputation: 717

Css transition scale+rotate on :hover have a shaking glitch in IE 10

So, here is the demo:

http://jsfiddle.net/9fmSt/7/

It works completly fine on Chrome/FF. Any idea how i can fix this?

.picCont {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    width: 320px;
    height: 360px;
    padding: 40px 40px 0px 40px;
    text-align: center;
    background: #FFF;
    position: absolute;
    z-index: 50;
    overflow: hidden;
    -moz-transition-property: all;
    -webkit-transition: all; 
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition: all 1s ease-in-out; 
    transition: transform all 1s ease-in-out;
    transition: -moz-transform all 1s ease-in-out;
}
.picCont:hover {
    box-shadow: 25px 25px 25px rgba(0,0,0,0.5);
    z-index: 300;
}

Js code for hover with rotate+scale inside jsfidle.

Upvotes: 0

Views: 1501

Answers (1)

Henry Ruhs
Henry Ruhs

Reputation: 1630

Improve your code and remove all the animation stuff from the Javascript side. Learn about keyframe animations: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

I think the glitch is caused by this :hover

.picCont:hover {
    box-shadow: 25px 25px 25px rgba(0,0,0,0.5);
    z-index: 300;
}

Upvotes: 1

Related Questions