Question

在使用Chrome开发网站时注意到以下行为：当我将页面完全滚动到底部时刷新页面时，我可以观察到垂直跳转。

请参阅以下Bootply。

要重现，请打开全屏预览（右侧的监视器图标），然后尝试以下操作：

刷新页面（确认表单重新提交） - ＆gt;没有跳
滚动到中间，刷新（确认表单重新提交） - ＆gt;没有跳
滚动到最底部，刷新（确认表单重新提交） - ＆gt;垂直跳跃

跳转实际上是由于这个Javascript试图在页面包含.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中尝试此操作时，我没有观察到任何跳跃。

请问好吗？

修改：I opened a bug on Chrome's bug tracker。

Answer 1

首先，我不得不让你失望，因为我不是Chrome开发者或其他官方消息来源。但我确实在这个问题上花了一些时间，并认为我分享了我发现的东西。你知道，后人。

正如你可能的那样，我在代码中添加了几个alert并尝试观察，究竟发生了什么。在我看来，像渲染视口，运行Javascript，应用填充，按下整个内容，然后Chrome实现并修复视口高度以容纳额外的填充。对我来说，它看起来像是一个诚实的渲染错误。

那就是说，我确实找到了能够解决这个问题的东西，至少在我的测试中是这样。我不知道这是否适用于您的环境，但它可能有助于进一步诊断渲染问题。

只需将额外的空格添加到边距而不是填充，就可以为我做好了。

if (bottom != 0)
{
    bottom += parseInt($(this).css('padding-bottom'), 10);
    $(this).css('margin-bottom', bottom);
}

也许其他人可以提出一个实际的解释。我确定想知道究竟是什么导致了这种令人不安的行为。

Answer 2

我没有完整的答案，但有关Chrome的一些观察：

浏览器可以在文档就绪事件之前开始绘制文档
浏览器可以在文档就绪事件之前显示垂直滚动条
浏览器可以在文档就绪事件之前滚动到以前可见的内容
浏览器可以在窗口加载后滚动到以前可见的内容

您的代码似乎在文档就绪事件的图中添加了20px填充。所以这是后果：

滚动到顶部或中间+刷新：

浏览器将相同的内容滚动到刷新前可见的视图中。除了滚动条改变其高度外，体高的增加不会影响滚动位置。

滚动到底部+刷新：

浏览器尝试尽可能将主体与底部对齐。似乎这样做两次 ⁺。当内容可用时，正文将一直滚动到底部。然后在文件准备就绪时将20px添加到正文高度，激活“向下滚动”按钮。在页面加载时，浏览器再次将主体与底部对齐，将所有内容向下推动20px，这会产生“垂直跳转”行为。

⁺为了测试，我添加了$(window).scroll(function() { console.log(arguments); })。滚动事件触发两次：文档读取后和窗口加载后。

总结：

如果在页面刷新之前就是这样，Chrome似乎会将主体与页面底部对齐。并且它会在页面加载后导致跳跃效果，从而成熟。

Firefox似乎遵循相同的步骤。但是，似乎Firefox智能地处理滚动到底部的情况。由于主体与底部对齐，因此会在视口上方的区域中更改布局（由填充触发）;增加滚动条的高度但不滚动。

当刷新页面滚动到底部时，Chrome垂直跳转

2 个答案: