iOS上Safari背景设置的问题

Question

我想我的个人网站里实现一个图片跟随iOS手机屏幕滚动的效果。
我首先使用了

body {
        background: url('../img/bg_mobile.jpg');
        background-size: auto 100vh;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

发现在iOS的Safari里， background-attachment: fixed;是不被支持的。于是我使用了

body:before {
    content: ' ';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../img/bg_mobile.jpg');
    background-size: auto 100vh;
    z-index: -1;
}

发现存在这样的问题。在我快速滚动页面的时候，会出现这样的卡顿：

当然，在不久后这个页面上的空白就会被修复：

这个问题现在不知道如何解决，拥有iOS设备想上手测试的可以戳这里

跪求各位大神QAQ

Answer 1

现在你是怎么解决的吖

Answer 2

将背景独立出一个fixed 的div