Question

我的目标是制作一个小幻灯片，我已在此处制作：https://jsfiddle.net/cas1g2ch/2/

以下是代码：

HTML

<div id="first-block">
    <div id="background-header">
        <div class="bg-wrapper">
            <div class="background-img-1"></div>
        </div><!--
        --><div class="bg-wrapper">
            <div class="background-img-2"></div>
        </div>
    </div>
</div>

CSS

#first-block{
    position: relative;
    width: 100%;
    height: 100vh;
}




@keyframes zoomPicture {
    0%{
        transform: scale(1.0); 
    }

    50%{
        transform: scale(1.1);
    }

    100%{
        transform: scale(1.0);
    }
}

#background-header{
    position: absolute;
    top : 0;
    left : 0;
    width: 200vw;
    height: 100vh;
    box-shadow: 0px 1px 1px #333;
}

#background-header > .bg-wrapper
{
    width: 100vw;
    height: 100vh;
    display: inline-block;
    float: left;
    overflow: hidden;
}

#background-header > .bg-wrapper > div{
    width: 100vw;
    height: 100vh;
    background-attachment: fixed;
    animation-duration: 20s;
    background-size: cover;
    animation-timing-function: ease-in-out;
    animation-name: zoomPicture;
    animation-iteration-count: infinite;
}

#background-header  .background-img-1 {
    background-image: url("http://www.hd-wallpaper.images-fonds.com/modules/mg3/albums/Paysages_(landscapes)_Wallpaper_HD/Paysages/Paysage_(landscape)_wallpaper_HD_0025.jpg");
}

#background-header  .background-img-2 {
    background-image: url("http://unreveunvoyage.fr/wp-content/uploads/2015/04/parc-national-de-banff-paysage-canada.jpg");
}

此时幻灯片显示有两张图片，每张图片都覆盖整个屏幕尺寸（width : 100vw ; height : 100vh ; background-size : cover）。
要显示我使用的图片background-image，背景是固定的。
由于我无法使用background-size : cover为背景设置动画，因此我使用transform : scale添加了一点缩放效果。

问题：

在Chrome上有一个奇怪的Glitch（Windows上的Chrome 56），只需使用滚动条在演示中看到问题，这是我制作的视频问题：https://www.youtube.com/watch?v=NHCLBTpxCAs（在此视频中，我选择了较高的transform: scale值来更好地识别错误）
在Firefox上，背景不固定，但图片是正确显示
令人惊讶的是，它在Internet Explorer 11上运行良好
它似乎也适用于手机

我该如何解决这个问题？什么是最好的解决方法？

Chrome和Firefox

0 个答案: