Search code examples
vagrantgulpubuntu-14.04browser-sync

Browser sync scroll not working across browsers


I have been trying to solve this issue with broswersync for couple of days. Any help in this will be highly appreciated.

My Env:

I am on windows and my server in Ubuntu in a vagrant box. I have port forwarding on, and use port 3000 to map to port 3000 on my vagrant. So the URL I use from the host machine is http://localhost:3000/index.html, and if from outside, then http://MY_IP_ADDRESS:3000/index.html

Description:

I have CSS injection, reload, form sync, clicks, working across all browsers and devices. What does not work is the sync scroll and below are the scenarios.

  1. scroll sync works only in chrome, in desktop mode ie, if I open the same URL in chrome in multiple windows in desktop mode, it works fine.
  2. If i have mobile mode on, on chrome and desktop mode, the scroll sync does not work.
  3. If I open the link on a firefox, safari, IE, the scroll sync does not work across them.
  4. I cannot scroll across different devices and browsers by opening the link on multiple devices.

My Gulp:

I work from windows, but my server is on vagrant/ubuntu. Here is my Gulp config for browser sync and watch.

// Static server
gulp.task('browser-sync', function () {
        browserSync({
                server: {
                        baseDir: "www"
                },
                ghostMode: {
                        scroll: true
                }
        });
});
// Static Server + watching scss/html files
gulp.task('serve', ['scss'], function () {

        browserSync({
                server: "./www"
        });
        gulp.watch(paths.scss, ['scss',browserSync.reload]);
        gulp.watch(paths.html, ['html',browserSync.reload]);
        gulp.watch(paths.js, ['js',browserSync.reload]);
        //gulp.watch("*.html").on('change', reload);
});

Thanks for your help in advance..


Solution

  • I recently ran into this problem as well. I found out that my problem was not having a html5 doctype.

    Do you have an html5 doctype on your page? If not, try adding one.

    <!DOCTYPE html>