CODEWITHSUNDEEP
internet-explorercss-transitionstransitioncss
user2446980
user2446980

Reputation: 111

css transition of background-size in IE 10

is it possible to get a transition of the background-size to work in IE 10? it works fine for webkit and moz, but not for IE 10. tough the IE transitions everything else i denoted, and it also changes the background-size, but without transition.

a {
    background: url("../image.png") no-repeat scroll 0 0 transparent;

    background-size: 302px auto;
    -webkit-background-size: 302px auto;
    -moz-background-size: 302px auto;    
    -ms-background-size: 302px auto;

    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;

    height: 83px;
    margin: 0 0 0 8px;
    width: 302px;


}

a:hover {
    background-size: 324px auto;
    -webkit-background-size: 324px auto;
    -moz-background-size: 324px auto;    
    -ms-background-size: 324px auto;

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);

    height: 89px;
    margin: 9px 0 0 -4px;
    width: 324px;
}

thx for your help!

Upvotes: 5

Views: 6973

Answers (2)

user2446980
user2446980

Reputation: 111

thanks to a friend of mine i have found another way to achieve the result i wanted. i just let the background-size on 100% and also dont change width or height; instead i resize by using transform. and transitioning the transform works even in IE10. 

a {
    background: url("../image.png") no-repeat scroll 0 0 transparent;

    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;    
    -ms-background-size: 100% 100%;

    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;

    margin: 0 0 0 8px;
    height: 83px;
    width: 302px;

}

a:hover {

    transform: scale(1.072,1.072);
    -webkit-transform: scale(1.072,1.072);
    -moz-transform: scale(1.072,1.072);
    -ms-transform: scale(1.072,1.072);

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);

    margin: 9px 0 0 8px;
}

works also fine in opera with the -o- prefix. and in IE9 its still ok, no transition there, but everything else works.

just wanted to share, maybe someone has the same problem.

Upvotes: 4

Thilak Rao
Thilak Rao

Reputation: 1932

I'm sorry, but it seems like IE10 doesn't support background-size as a transition-property. The transition would simply fail, but it should gracefully degrade.

Upvotes: 1

Related Questions