Chrome vertical jump when refreshing page scrolled to bottom

Question

In noticed the following behavior when developing a website using Chrome: when I refresh the page while it's being scrolled fully to bottom I can observe a vertical jump.

See the following Bootply.

To reproduce, open the fullscreen preview (the monitor icon on the right), and try the following:

1. refresh the page (confirm form resubmission) --> no jump
2. scroll to middle, refresh (confirm form resubmission) --> no jump
3. scroll to very bottom, refresh (confirm form resubmission) --> vertical jump

The jump is in fact caused by this Javascript that tries to maintain vertical rhythm when page contains figures with .align-center 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");
});

Of course removing this Javascript also removes the vertical jump observed. What I don't understand is that padding is applied when DOM is ready so it shouldn't cause visible vertical jumps. I think the jump has to do with the way Chrome handles the viewport when page is scrolled to very bottom but I don't really know how to confirm/infirm this.

When trying this in Firefox or Safari, I don't observe any jump.

Any idea please?

---

Edit: I opened a bug on Chrome's bug tracker.

Answer 1

First of all, I have to disappoint you, as I'm not a Chrome dev or other official source. But I did put some time into the issue and thought I'd share what I found. You know, for posterity.

As you probably have, I put a couple alerts in the code and tried to observe, what exactly was happening. It seems to me like the viewport is rendered, the Javascript runs, the padding is applied, the entire rest of the content is pushed down, then Chrome realizes and fixes the viewport height to accomodate the additional padding. It looks like an honest rendering bug to me.

That said, I did find something that fixed the effect, at least in my tests. I don't know whether this is applicable in your environment, but maybe it does help in diagnosing the rendering issue further.

Simply adding the additional space to a margin, instead of the padding, did it for me.

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

Maybe somebody else can come up with an actual explanation. I'd sure like to know what exactly causes this unnerving behavior.