CSS3动画使具有固定位置图像的元素停止工作

Question

In Google Chrome, when you have two elements, one that has a CSS3 animation and another with a background-image with a fixed position and an absolute positioned parent (important to keep that), the fixed property stops working when the animation is active.

Here is a JSFiddle, open in Chrome, scroll up and down to see the image be fixed, and then hover over the red square to see the fixed property break:

http://jsfiddle.net/keleturner/44mjq/

 <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; }

Any ideas why?

Answer 1

Why not make the body element have the background? Demo

But to answer your question, it's rendering error due to the body increasing size due to the scale. To fix it add -webkit-transform:translateZ(1px); to either .animation or .background

But your setup is a silly one to have, it can be done in much better ways