在我的网站各部分的背景图片上使用全宽和全高,但我在Android上遇到了一些跳跃的行为。我使用modernizr来检测touchevents并将背景附件从固定更改为本地。 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;
}
}
答案 0 :(得分:1)
这个问题是由这两个属性与Chrome浏览器的浏览器行为相结合引起的:
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代码可能会很乱。