Android 上的跳跃行为答案

【问题标题】：Jumpy behavior on AndroidAndroid 上的跳跃行为
【发布时间】：2016-04-22 22:58:00
【问题描述】：

在我的网站部分的背景图像上使用全宽和全高，但我在 Android 上遇到了一些跳跃行为。我正在使用modernizr 来检测触摸事件并将背景附件从固定更改为本地。 Here is the site 及以下是我正在使用的 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;
    }
}

【问题讨论】：

不完全确定，但我认为问题是由height: 100vh; 和background-size: cover; 组合引起的。当您向下滚动时，Android Chrome 浏览器的“标题”部分会消失。所以元素变得有点高，背景图像被拉伸得更多以覆盖元素。在我的一个项目中遇到了这个问题。
@shirfy - 是的，我也是这么想的。我更改了背景附件：本地和高度：100%。它似乎工作得更好一些。
不是最好的解决方案，但我会保留 css 并在页面加载后使用 js 设置元素的高度。
是的，这似乎成功了。
如果这对您的情况来说是一个足够好的解决方案，那么我会写一个答案。

标签： android css background-image viewport-units background-attachment

【解决方案1】：

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

CSS：

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

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

解决方案

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

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

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

jQuery:

(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 代码可能会很乱。

【讨论】：