CriOS mobile scroll to top bug

[thebarndog]

Given the following route setup in conjunction with server side rendering:

import ReactDOM from 'react-dom';
import React from 'react';
import { Router, browserHistory, match } from 'react-router';
import { Provider } from 'react-redux';
import routes from 'shared/routes';
import createStore from 'shared/redux/store';

const initialState = typeof window === 'undefined' ? {} : window.__INITIAL_STATE__;
const store = createStore(browserHistory, initialState);
const mountNode = document.getElementById('app');

const update = () => {
  const state = store.getState();
  if (state.routing.location.state === null || typeof state.routing.location.state === 'undefined') {
    setTimeout(() => window.scrollTo(0, 0));
  }
};

match({ history: browserHistory, routes }, (error, redirectLocation, renderProps) => {
  ReactDOM.render(
    <Provider store={store}>
      <Router onUpdate={ update } { ...renderProps } />
    </Provider>,
    mountNode
  );
});

I have my application scroll to the top of the document on a route change provided that the location state is undefined (I use defined states for custom scrolling within components). For example every time a nav bar link is pressed, the site url with change, the proper page will be loaded, and the document will scroll to top.

However, and this only happens in CriOS, the document doesn't scroll. It will navigate to the correct page but the scroll offset of the window never changes. More interestingly, it only happens when the destination path is different from the source path so for example if I press the /home link while on /home, the document scrolls to to the top as expected. If I'm on /home and I navigate to /concat, it doesn't work.

I've tested this on mobile Chrome, Firefox, and Safari and as well as all the desktop counterparts and it only occurs in CriOS. I originally suspected it's somewhat related to this issue (which has since been fixed, woot woot) but there's no hard refresh going on upon navigation.

[taion]

I'm not sure what you expect us to do here – it's not like onUpdate isn't firing here, and your usage of a Redux integration here just confuses matters for the purpose of this issue.

As you're providing the scroll management, I don't see how this isn't just something else you'd have to work around on your side.

[thebarndog]

Well it seems like it's a bug in CriOS but I can't tell if it's a bug in the browser, in this library, or some other library. I was hoping you'd have some insight into that.

[thebarndog]

Furthermore, because this bug only happens on route transitions, it seems far more likely that something is happening in the bowels of either react-router or history. My guess would be history but at this point I've been reading source code so long I'm code blind.

[taion]

You're calling scrollTo on a timeout after the rendering has completed. This is entirely out of the hands of React Router and history at that point. You're outside the render loop so how could React Router possibly still be doing anything at all to your scroll behavior?

[thebarndog]

I don't think it's an unfair assumption to make when the bug was introduced by upgrading the history and react-router packages in my application.