背景附件：修复了在移动设备上滚动时导致跳转的问题

如何解决背景附件：修复了在移动设备上滚动时导致跳转的问题

在阅读了很多关于我的问题的主题后，我仍然不知道如何解决它。

这是我目前面临的问题的 GIF：

https://s4.gifyu.com/images/20210302_235317.gif

正如我们所看到的，当我开始滚动页面时，浏览器的应用顶部栏（黑色部分）开始减少，这是意料之中的。但与此同时，底部开始出现一个浅蓝色块，这实际上是应用了背景颜色的页面主体。当我停止滚动（将手指从屏幕上移开）时，所有内容都会调整大小并显示正常。但这会导致发生“跳跃”，这很糟糕。

请注意，桌面上的一切都按预期运行，视口保持不变。当 background-attachment 不是 fixed 时，也不会发生这种跳转。

这是我的代码：

<!doctype html>
<html lang="fr">
    <head>
        <Meta charset="utf-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <link href="styles/css/normalize.css" rel="stylesheet">

        <style> 
                body {
                        background-color: powderblue;
                        padding: 0;
                        margin: 0;
                        overflow: scroll;
                        width: 100vw;
                        height: 100vh;
                }

                .Box {
                        min-height: 100%;
                        background-size: cover;
                        background-position: center;
                        background-attachment: fixed;
                }

                .one {
                        background-image: url("https://www.lesoir.be/sites/default/files/dpistyles_v2/ena_16_9_extra_big/2020/01/22/node_274673/27378739/public/2020/01/22/B9722319434Z.1_20200122153715_000+GOLFBQVE6.2-0.jpg?itok=SglXj3C31579704194");
                        border: 3px solid green;
                }

                .two {
                        background-image: url("https://cdn.shopify.com/s/files/1/0064/7400/6618/articles/Sans_titre_2000x.png?v=1559840071");
                        border: 3px solid #8fd19e;
                }

                .three {
                        background-image: url("https://www.visitflanders.com/fr/binaries/45b1b488-84d1-47ed-a063-4484b5922992_tcm21-132651.jpg");
                        border: 3px solid #ba8b00;
                }

        </style>
    </head>
    <body>
        <div class="Box one"></div>
        <div class="Box two"></div>
        <div class="Box three"></div>
    </body>
</html>