CSS3動畫使元素與固定位置圖像停止工作

在谷歌Chrome瀏覽器中，當你有兩個元素，一個具有CSS3動畫，另一個具有固定位置和絕對定位父級的背景圖像（重要的是要保持），當動畫處於活動狀態時，固定屬性停止工作。CSS3動畫使元素與固定位置圖像停止工作

這裏是一個的jsfiddle，在Chrome中打開，向上和向下滾動以查看圖像固定，然後將鼠標懸停在紅場看到固定資產突破：

<div class="animation"> 
</div> 

<div class="background"> 
    <span></span> 
</div> 

.animation { display: block; width: 300px; height: 300px; background: red; -webkit-transition: 1.8s -webkit-transform ease; } 
.animation:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);} 

.background { position: absolute; left:0; top: 300px; display: block; width: 100%; height: 500px; } 
.background span { background-attachment: fixed; background-size: cover; background-image: url(http://image.jpg); width: 100%; height: 100%; display: block; }

任何想法爲什麼？

來源

2014-06-11 user3245789