javascript - 刷新页面滚动到底部时Chrome垂直跳转

Question

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

见下文Bootply .

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

刷新页面(确认表单重新提交)-->无跳转

滚动到中间，刷新(确认表单重新提交)--> 无跳转

滚动到最底部，刷新(确认重新提交表单)--> 垂直跳转

跳转实际上是由当页面包含 .align-center 的数字时试图保持垂直节奏的 Javascript 引起的。类(class):

$(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 处理视口(viewport)的方式有关，但我真的不知道如何确认/确认这一点。

在 Firefox 或 Safari 中尝试此操作时，我没有观察到任何跳跃。

请问有什么想法吗？

编辑:I opened a bug on Chrome's bug tracker .

Answer 1

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

正如你可能有的，我放了几个 alert s 在代码中并试图观察到底发生了什么。在我看来，视口(viewport)被渲染，Javascript 运行，填充被应用，整个其余的内容被向下推，然后 Chrome 实现并修复视口(viewport)高度以适应额外的填充。对我来说，这看起来像是一个诚实的渲染错误。

也就是说，至少在我的测试中，我确实找到了一些可以解决这个问题的方法。我不知道这是否适用于您的环境，但也许它确实有助于进一步诊断渲染问题。

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

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

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