webkit-transform影響邊框半徑

Question

我想在鼠標懸停的圖像上執行CSS3轉換轉換。 該圖像的邊框半徑在動畫後消失（在Chrome中）。

下面是HTML：

<div class="inner"> 
    <a class="imgLink" href="item.iframe.htm" target="_top"> 

     <img src="myimage.jpg" alt=""> 

     <span class="imgLinkOverlay">&nbsp;</span> 

    </a> 

</div> 

和CSS：

.inner { 
     margin: 0.75em; 
     background: #FFF; 
     border-radius: 10px; 
     overflow: hidden; 
     position: relative; 
     zoom: 1; 
    } 

.imgLink img { 
     width: 100%; 
     display: block; 
     position: relative; 
     -webkit-transition: -webkit-transform 0.25s ease-in-out; 
     transition: transform 0.25s ease-in-out; 
    } 


.imgLink:hover img { 
     -webkit-transform: scale(1.2); 
     -moz-transform: scale(1.2); 
     -ms-transform: scale(1.2); 
     transform: scale(1.2); 
    } 

這裏可以找到小提琴：http://jsfiddle.net/3x2ft/

Answer 1

固定！ 我將此規則添加到.inner：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);