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.
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..
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>