Question

在谷歌浏览器中，如果你有两个元素，一个是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; }

任何想法为什么？

Answer 1

为什么不让body元素具有背景？ Demo

但要回答您的问题，由于比例因body尺寸增加而导致呈现错误。要解决此问题，请将-webkit-transform:translateZ(1px);添加到.animation或.background

但是你的设置很愚蠢，可以用更好的方式完成

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

1 个答案: