背景大小的過渡在IE10/11中不起作用

Question

這段代碼有什麼問題？縮放轉換效果在Internet Explorer 10或11中無效（在其他瀏覽器中爲「確定」）。

<div class="image"></div> 

.image { 
    width:300px; 
    height:200px; 
    background: url("http://lorempixel.com/300/200"); 
    background-position:center; 
    background-size:100%; 
    transition: background-size 1s ease; 
    -moz-transition: background-size 1s ease; 
    -o-transition: background-size 1s ease; 
    -webkit-transition: background-size 1s ease; 
} 
.image:hover { 
    background-size:150%; 
} 

背景大小的轉換應該用IE10/11的工作，因爲我看到here
哪裏是我的錯？
I made a Codepen here

Answer 1

似乎IE不支持背景大小的過渡百分比。 Wierd ... 因此，我們將使用SCALE而不是百分比背景大小。 下面是正確的代碼：

<div class="image-box"> 
    <div class="image"> 
    </div> 
</div> 

.image-box{ 
    width:300px; 
    overflow:hidden; 
} 
.image { 
    width:300px; 
    height:200px; 
    background: url("http://lorempixel.com/300/200"); 
    background-position:center; 
    transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 
.image:hover { 
    transform: scale(2); 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    -o-transform: scale(2); 
    -ms-transform: scale(2); /* IE 9 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand')"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

And the updated Codepen here