App scrolls down on load

[reekypete]

Seems to be a webkit thing - when you load the page, it rolls down to the bottom, like so:

Annoying and clumsy but not a show-stopper

[techieshark]

Does the scrolling down happen on a fresh page load?

I've tried on Chrome, Firefox, and Safari and here's what I see --

If you open a new tab and type in the address (for me, http://localhost, the page loads and the top of the page is at the top of the browser window e.g. not scrolled down at all).

If you click a button (say, "Primary aged student") the page scrolls down and a new div is added (e.g. .block-address for the location search block). If you then refresh the page, the browser scrolls you down toward the bottom (but the block you were on is gone).

Browsers normally try to maintain scroll positions across reloads. To see this in action, visit http://slashdot.org, and scroll down a couple stories (e.g. to this one on climate):

Now refresh the page. The browser should stick you roughly where you were before.

The reason it seems glitchy is because when we refresh, we lose the state we had previously (the search by address block is gone, for example) and so the browser has scrolled down as far as it can but the page appears differently than it did right before the reload.

Two possible fixes:

1. (What we might think about longer term) - store state in the URL, and restore app to that state on reload. You see this when you go to maps.google.com, type an address in and are shown that location, then you refresh the page.
2. (What we should do for now) - force browser to go to top of page; since we know on reload they've lost any state they had at any given scroll position it doesn't make sense to try scrolling back down to that position. You see this sort of behavior on Facebook for example (refresh and go to top).

This auto scrolling is discussed on Stack Overflow.

http://stackoverflow.com/questions/7035331/prevent-automatic-browser-scroll-on-refresh

@reekypete can you test out this fix?

Play around with this in the Chrome console

window.onunload = function() {  // you might try window.onbeforeunload too to see the difference
  window.scrollTo(0,0);
  document.body.style.backgroundColor = "red";
}

(You might try setting network throttling to 3G speed to see it in action at a slower speed. I've set the background to red above so you see that the page is scrolled up with .onbeforeunload, background changes, then page reloads - it just might matter because if user refreshes and we immediately jump to top then pause for a period while the page contents reload they might think app is ready to go, start interacting, then get annoyed when page actually reloads, but I think .onunload solves that.)

[reekypete]

This is solving a different problem.

The problem occurs on first load (open a clean browser, then type the URL into the address bar) and on a hard refresh (Ctrl-F5).

Rustum and I have experienced it repeatedly across different browsers for several months now.

[techieshark]

Thanks @reekypete.

I'm not able to observe a scroll-after-first-load on Chrome, Safari, Firefox, or Opera -- but that's all on Mac. Perhaps Mac vs. Windows makes a difference here. Can you check on one of those browsers on OS X to see if you still observe the odd behavior? I'll be able to test on more Windows versions + browsers tomorrow but I just tried Windows 10 + IE 11 and couldn't reproduce from a fresh page load either.

[reekypete]

I'm wondering if its caused by a plugin. I was debugging it, and the focus shifts to the body element after all the SF code has run.

[techieshark]

Interesting. How were you debugging this (how do you see when the focus shifts to the body element?).