Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

scroll position reset on slow loading fastboot served pages

See original GitHub issue

I know why this is happening, I’m not sure what the correct solution is yet.

If a page is served with Fastboot the immediate render is available. Then if Ember is slow to instantiate for any reason if you’ve scrolled down the page when the App starts the scroll position is reset. This is not the correct experience.

I suspect the correct thing to do is if the state is new assume the current scroll position rather than 0,0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

bcardarellacommented, May 30, 2017

Keep in mind we can’t simply assume the current x,y position of scroll here. One of the reqs of this lib is to reset the scroll position on each page transition, or reposition if it is in history.

So there needs to be a way to distinguish that this is an app instantiation event and ember is taking over from fastboot rendered page.

There could be a flag in an initializer for the service that is a hasStartedUp or something like that, defaulted to false. So on first read it will default to current browser’s scroll position. On additional reads it will default to 0,0

courtheadcommented, Jul 8, 2017

There are two issues. The first is what @bcardarella pointed out here, which is that this line is resetting the scroll position to 0,0 without taking into account where the user was scrolled before app instantiation happens.

However, even if you work around that, there’s a second issue (also pointed out by @bcardarella in #17) that causes a very unpleasant jump. Right at app instantiation, Ember erases all the HTML that came from FastBoot and renders its own HTML. That causes the app to scroll to the top of the page, and the router-scroll service’s update function isn’t called until didTransition happens a split second later.

Here’s a temporary hack to fix both of these problems. I put the following in my top-level application route:

import { scheduleOnce } from 'ember-runloop';

export default Route.extend({
  setupController() {

    if (!this.get('fastboot.isFastBoot')) {
      const routerScroll = this.get('router.service');
      routerScroll.set('key', window.history.state.uuid);

      scheduleOnce('afterRender', this, () => {
        const scrollPosition = routerScroll.get('position');
        window.scrollTo(scrollPosition.x, scrollPosition.y);
Read more comments on GitHub >

github_iconTop Results From Across the Web

Maintain/Save/Restore scroll position when returning to a ...
Great answer but won't work when dynamically loading content and you want to save state in the onPause() method. – Gio. Sep 18,...
Read more >
Scroll position does not reset when switching between long docs
Select the second doc in the sidebar. The second doc loads with the scroll position already partially down the page. Expected behavior
Read more >
Stuck on boot - OnePlus Community
Scroll down the page for contact and online chat details. ... Stuck at Boot screen automatically, even not restart or shutdown,
Read more >
Memorize Scroll Position Across Page Loads - CSS-Tricks
The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and...
Read more >
How to Hard Reset an Android Phone
Is your Android Smartphone slow, freezing, not responsive, responding incorrectly, ... access a fastboot/testing/recovery/etc screen, select reset, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found