安卓上的跳跃行为

Question

在

我网站部分的背景图像上使用全宽和全高，但我在 Android 上遇到了一些跳跃行为。我正在使用 modernizr 来检测触摸事件并将背景附件从固定更改为本地。这是网站，下面是我正在使用的css：

.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
    height: 100vh;
    min-width: 100%;
    color: $white;
    display: table;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
// if a touchevent is detected
.touchevents {
    .intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
        background-attachment: local;
    }
}

Answer 1

该问题是由这两个属性与 Chrome for Android 浏览器的行为相结合引起的：

.CSS：

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    height: 100vh;
    background-size: cover;
}

当用户向下滚动时，浏览器的顶部工具栏将消失，因此五个元素将获得高度。由于background-size设置为cover因此图像也必须快速拉伸。

溶液

我无法在移动设备上对其进行测试，但向 height 属性添加转换可能会解决问题。

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    -webkit-transition: height 0.2s linear;
    transition: height 0.2s linear;
}

如果它没有帮助，有一个jQuery解决方案，它将在页面加载和窗口大小调整时设置这些元素的高度，这样每次顶部工具栏消失时背景都不会跳跃。

j查询：

(function($) {
    var elements = $('.full-height');
    function elementHeightFix() {
        var windowHeight = $(window).height();
        elements.each(function() {
            $(this).css('height', windowHeight);
        });
    }
    $(window).resize(function() {
        elementHeightFix();
    });
    elementHeightFix();
}(jQuery));

为了简单起见，我使用了单个选择器，您可以将选择器存储在对象中并遍历它们。请注意，我主要使用 CoffeeScript 和 TypeScript，所以我的纯 jQuery 代码可能会很混乱。