8

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

请参阅以下Bootply。

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

  1. 刷新页面（确认表单重新提交）--> 不跳转
  2. 滚动到中间，刷新（确认表单重新提交）--> 不跳转
  3. 滚动到最底部，刷新（确认重新提交表单）--> 垂直跳转

跳转实际上是由当页面包含带有.align-center类的图形时试图保持垂直节奏的 Javascript 引起的：

$(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 tracker 上打开了一个 bug。

4

2 回答 2

1

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

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

您的代码似乎在文档就绪事件中为图形添加了 20 像素的填充。所以后果如下：

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

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

滚动到底部+刷新：

如果可能，浏览器会尝试将正文与底部对齐。似乎这样做了两次+。当内容可用时，正文会一直滚动到底部。然后在文档就绪时将 20px 添加到正文高度，这会激活“向下滚动”按钮。在页面加载时，浏览器再次将主体与底部对齐，将所有内容向下推 20 像素，从而创建“垂直跳转”行为。

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

总之：

如果在页面刷新之前这样，Chrome 似乎会将正文与页面底部对齐。它会在页面加载后过早地执行此操作，从而导致跳转效果。

Firefox 似乎遵循相同的步骤。但是，Firefox 似乎智能地处理滚动到底部大小写。由于 body 与底部对齐，它使 viewport 上方区域的布局发生变化（由 padding 触发）；增加滚动条的高度但不滚动。

于 2014-05-20T10:31:37.517 回答
1

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

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

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

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

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

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

于 2014-05-19T10:21:01.523 回答