Browser-sync: Page scrolls up on full page reload

[faergeek]

When css is changed everything's ok, but when I change js or html it needs full page reload and when it's done the page is scrolled up.
It's reproducible on Chrome, Opera (with Blink), Safari, but not on Firefox. Old Opera (Presto) and IE untested.
It happens even if page reload not initiated by browser-sync. So I think the problem somewhere where you inject scripts or trying to sync scroll to soon may be (but it happens event with ghostMode set to false).
With livereload (using gulp-connect) it doesn't happen.

[shakyShane]

_runs off to see how livereload achieves this_

...

OK it seems I was overthinking this. I need to keep track of the scrollTop position between page reloads & its seems the easiest way to do that would be to append the value as a query string and read it after...

Will be in the next release.

[shakyShane]

This is on NPM now at version 0.6.1

[faergeek]

Please don't fix it this way. I found simpler solution.
It's all about 0.6.0 version published in npm.
In browser-sync-client.js in location:update hanlder.

    socket.on("location:update", function (data) {
        if (data.url) {
            window.location = data.url;
        }
    });

Even if we do window.location = window.location, Chrome doesn't remember scroll position. So we need to do window.location.reload(), may be passing true to force reload from server, not from cache:

    socket.on("location:update", function (data) {
        if (data.url && window.location.pathname !== data.url) {
            window.location = data.url;
        } else {
            window.location.reload(true);
        }
    });

[mietek]

Is this really fixed?

[faergeek]

This is broken now for IE8, maybe for other versions too. I think this should be in browser-sync-client issues. All code for that is was there. shakyShane/browser-sync-client#1

[faergeek]

@shakyShane, could we reopen this issue to collect more feedback on that problem and solution? I think much more people watching this repo, but not watching https://github.com/shakyShane/browser-sync-client.

[shakyShane]

@faergeek - sure.

Just to summarise where we are with this.

Currently BrowserSync uses a the simple location.reload method when performing any full page reloads. In modern browsers, the scroll position is saved correctly...

In older browsers though, the window would scroll back to the top still...

So we have this solution https://github.com/shakyShane/browser-sync-client/pull/9 which basically just appends a query param to the url that's being reloaded. Each page load would then check for this param and replay it.

It's gross, I know. But it works and is a must-have feature for older browsers. The reason I dropped it was because I only want it applying to browsers that need it (IE 9 & below I think).

[faergeek]

@shakyShane let me correct this.

First, this is not for old browsers.
This behavior related exactly to Microsoft browsers (not sure which versions, IE8 and lower, may be 9 too).
But that's not a reason too introduce browser detection for that feature. It works in any other browser and AFAIK doesn't break anything.

Second, the code that I suggest doesn't append query params. Scroll position stored in cookies.

[shakyShane]

Ahh. Sorry my mistake.

Either way, using cookies was pulled a while ago as it was not reliable enough. do you ever see any problems with reliability?

[faergeek]

While I tested a while ago, I didn't see any problems. And last time when I rewrote it, I didn't see problems either. Anyway, we could let user configure cookie name if you mean that can be a problem.

[steckerhalter]

I'm using BrowserSync with https://github.com/hexojs/hexo (plugin: https://github.com/hexojs/hexo-browsersync/) and noticed that upon [BS] Reloading Browsers... the page doesn't keep the scrolling position in Iceweasel (Firefox on Debian) 31.6.0.

With Chromium 41.0.2272.118 it works as expected

[steckerhalter]

same issue on latest Firefox 37.0.2

[octoxan]

Still having this issue in Chrome Version 50.0.2661.102. After page reload the page scrolls up a little, down a little, up a little, and fights me when I try to scroll. Does this for about 30 seconds before giving me the ability to scroll.

[ArmorDarks]

Having this issue too, but in my case page jump are pretty big (but always to same, but wrong position).

[oskarscholander]

I got the same issue. Chrome Version 56.0.2924.87 (64-bit)

[ArmorDarks]

Also worth to mention that in my case after initial load of Browser Sync everything works fine, without accident jump, but after a while it start to jump to same position, like there is an issue with position memorization.

[Zdend]

The issue is still there in Chrome Version 56.0.2924.87 (64-bit). In my case it jumps somewhere in the middle of the page.

[numbfall]

I have the same issue on every css injection. Firefox 52.0.2 (64-bit). The scroll position goes to somewhere in the middle of the page.

[franciscolourenco]

Same Chrome Version 61.0.3128.0

[Kurren123]

I'm getting this too on the latest version of chrome

[testgit-1]

+1

[testgit-1]

Firefox 54.0
The scroll position goes to somewhere in the middle of the page.

[mbxtr]

Came across this issue while encountering the same problem. I noticed that browser-sync was trying to reload browsers a lot, so I set the --reload-debounce (CLI) option to 200. Now, browser-sync only attempts to reload once after making changes and I no longer have scroll position issues.

[claudiney]

Same on Firefox 57, page moves to top.

[muiqo]

+1 Firefox 57 on Windows

[onetrev]

Same issue here. However, in Chrome 67, everything works perfectly, a BrowserSync induced reload and scroll position is maintained. But in Firefox 61 and Edge 17, a BrowserSync reload causes the page to jump to the top.

But if I do a regular (F5 style) manual refresh, then my scroll position is maintained as expected in Firefox. So it seems like this should be fixable, somehow...

[panoply]

Chrome version 73 and this issue persists.

Update
Here is my temporary solution which will prevent scrolling to top on each reload:

rewriteRules: [
      {
        match: /<\/body>/,
        fn: function (req, res, match) {
          return `
          <script>
            // Perserve scroll on BrowserSync reload
            var _bs_sc_ = document.querySelector(".wrapper");
            _bs_sc_.scrollTop = parseInt(localStorage.getItem("_bs_scroll") || 0);
            _bs_sc_.addEventListener("scroll", function (e) {
              localStorage.setItem("_bs_scroll", e.target.scrollTop)
            });
          </script>
          </body>`
   }
}

Only tested on single site using chrome.

[stgreenman]

To stop my browser scroll from resetting when saving a SCSS file, I appended .on('change', browserSync.reload) to my Gulp Sass watch line.

(Note - Gulp v4)

gulp.watch('scss/**/*.scss', sassCompile).on('change', browserSync.reload) 
````

**gulpfile.js example:**

var gulp = require('gulp');
const { series } = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

function serve(){
browserSync.init({
server: {
baseDir: "./"
},
});
gulp.watch('scss/*/.scss', sassCompile).on('change', browserSync.reload);
gulp.watch('./css/.css').on('change', browserSync.reload);
gulp.watch("./.html").on('change', browserSync.reload);
}
exports.serve = serve;

function sassCompile(cb) {
return gulp
.src('./scss/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
cb();
}
exports.sass = sassCompile;

exports.default = series(serve);
```

[TamirCode]

when saving SCSS file my chrome skips to the bottom of the page.