Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 874
user2446980 Avatar asked Jun 03 '13 08:06

user2446980


Video Answer


2 Answers

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.

like image 174
user2446980 Avatar answered Oct 10 '22 08:10

user2446980


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.

like image 1
Thilak Rao Avatar answered Oct 10 '22 06:10

Thilak Rao