html - 关键帧动画和背景附件 : fixed issue on webkit

Question

希望有人能帮我解决这个问题:

我正在开发一个单页布局网站，其中包含一些关键帧动画和几个固定的背景图像，当您向下滚动时，这些图像会被覆盖。

奇怪的是(或不是)，我无法管理背景附件:已修复以使用关键帧动画:

 <style>
.container{with:300px; height:400px}

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}
.mask {
    background-attachment:fixed;
    position:relative;
    width:400px;
    height:300px
}
.mask1 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/1.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
.mask2 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/2.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
@-webkit-keyframes scale {
    from {
        -webkit-transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
</style>

<div id="wrapper">
    <div class="container">
        <div class="scaleAnimation"></div>
    </div>
    <div class="container">
        <div class="mask mask1"></div>
        <div class="mask mask2"></div>
    </div>
</div>

示例:http://jsfiddle.net/fpuLR/2/

如果我删除动画，背景附件工作正常:

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}

示例:http://jsfiddle.net/fpuLR/3/

知道为什么会这样吗？

提前致谢， 库特罗

Answer 1

这不是最优雅的解决方案，但这是我在遇到与您相同的问题时想到的 - 抱歉，已经晚了几个月，您可能从来没有解决过这个问题，但这个问题没有得到解答，所以我想我' d 至少试一试。

据我所知，当使用 CSS 动画/关键帧时，固定元素会“损坏”。我尝试将相同的动画/关键帧(因为我使用的是关键帧)应用到我遇到问题的 div - 并且固定定位有效!然而，它似乎只是在应用相同的动画时保持其固定位置。

在我的例子中，当页面加载时我正在淡入图像，所以我使用了这个:

.fadeIn-Delay-2s {
    -webkit-animation-delay:2s;
    -moz-animation-delay:2s;
    -o-animation-delay:2s;
    animation-delay:2s;
}

.fadeIn-3s {
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
}

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

我的解决方案是对其应用相同的动画，但将持续时间设为 0.01 秒。它为我解决了这个问题，直到我找到不同的东西或找到一个 jquery/javascript 解决方案来提供与 CSS 动画提供的相同平滑度，我会坚持这个。