我注意到在使用Chrome开发网站时出现了以下行为:当我在页面被完全向下滚动时刷新页面,我可以观察到一个垂直的跳跃。
请参见以下 Bootply。
要重现,请打开全屏预览(右侧的显示器图标),并尝试以下操作:
当然,删除这个Javascript也会消除观察到的垂直跳跃。我不明白的是,当DOM准备就绪时应用填充,因此不应该导致可见的垂直跳跃。我认为跳跃与Chrome处理视口的方式有关,当页面滚动到底部时,但我不知道如何确认/否认这一点。
在Firefox或Safari中尝试时,我没有观察到任何跳跃。
请问您有任何想法吗?
编辑:我在Chrome的错误跟踪器上开了一个bug。
请参见以下 Bootply。
要重现,请打开全屏预览(右侧的显示器图标),并尝试以下操作:
- 刷新页面(确认表单重新提交)-> 不会跳跃
- 滚动到中间,刷新(确认表单重新提交)-> 不会跳跃
- 滚动到底部,刷新(确认表单重新提交)-> 垂直跳跃
.align-center
类的图像时维护垂直节奏。$(document).ready(function() {
$(window).resize(function() {
var baseline = parseInt($('body').css('line-height'), 10)
$('.align-center').each(function() {
var height = $(this).outerHeight();
console.log(height)
var bottom = baseline - (height % baseline);
if (bottom != 0)
{
bottom += parseInt($(this).css('padding-bottom'), 10)
$(this).css('padding-bottom', bottom);
}
});
}).trigger("resize");
});
当然,删除这个Javascript也会消除观察到的垂直跳跃。我不明白的是,当DOM准备就绪时应用填充,因此不应该导致可见的垂直跳跃。我认为跳跃与Chrome处理视口的方式有关,当页面滚动到底部时,但我不知道如何确认/否认这一点。
在Firefox或Safari中尝试时,我没有观察到任何跳跃。
请问您有任何想法吗?
编辑:我在Chrome的错误跟踪器上开了一个bug。