Whitespace below application - Ember.js

Question

I haven't been able to find an answer for this question yet, so maybe no one is having it. I'm pretty sure its impossible to replicate on a jsfiddle.

So, I have a page that gets a little long, probably 2200-2500px. But when a user hits submit on the page (located at the bottom of the page), they are left with a white screen and a navbar (something that's at the top of the page). That's the description I'm getting from users that are not computer literate...

As it turns out, when ember removes the route from the application outlet, its not removing the space below so there's a large whitespace below the next page causing users to have to scroll up to see the next page content.

I am programatically calling ex. route.transitionTo('page-after-submit'); . I'm not sure if there's a bug or something in Ember itself causing this issue. Anyone know?

Extra info:

• Structure of the page is ApplicationView->SignUpRouteView transitioning to ApplicationView->NewUserView .

• Ember Version: v1.3.0

• Handlebars Version: v1.1.2

Pic of the phenomenon:

Answer 1

This is 'normal' behavior - Ember preserves the scroll position when you change routes. To change that include the following in your ApplicationController

App.ApplicationController = Ember.Controller.extend({
  currentPathChanged: function() {
    if (window) window.scrollTo(0, 0);  
  }.observes('currentPath')
});

This will scroll to the top of the page every time you transition between routes