Question

我有一张背景图片，我想随background position x移动以创建无限图片效果

在html

<div :class="$style.holder">
        <div :class="$style.inner" :style="{'background-position-x': pos + '%'}"></div>
    </div>

在CSS中

.holder {
    height: 60%;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 0;
}
.inner {
    background-image: url('img');
    background-repeat: repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70%;
    transform: translateZ(1px);
}

我正在像这样更新职位

this.$store.watch(state => state.frameRate.lastTime, now => {
            this.pos += (now - lastTime) * (window.innerWidth / window.innerHeight);
            lastTime = now;
        });

它在桌面设备上可以正常工作，但在移动设备（Android）上却无法正常工作，因为图像滚动到末尾然后消失1秒钟，然后从头开始重新移动（一直{{1 }}不断变化）

我真的很困惑为什么会这样？背景重复无效吗？还是其他？

UPD 进行进一步的实验-当我图像的背景位置x为100％时，它是可见的，而当它为101％时，它是不可见的。它不会滑出屏幕，只会消失。

CSS在手机上的背景重复无法正常工作

0 个答案: