Incorrect thumb height on the initial render

I’m using Scrollbars as a wrapper of the whole page. It works fine, but the [vertical] thumb is 0px high on the initial render. Once I scroll using a wheel / some other means, or resize the window, then the thumb’s height is calculated correctly. I’m getting this only in Chrome, not Firefox.

I’ve set some breakpoints in the code, and it appears that update, and consequently getThumbVerticalHeight, is called only once, before the DOM is painted (the page is completely blank when the breakpoint is triggered). Apparently, having raf is not enough, since it’s still somehow executed before the browser is done painting.

Not sure whose fault it is (React’s or Chrome’s, or maybe it’s Firefox who’s doing it wrong), but as pointed out in a related SO question, the only way to do size-related DOM probes reliably is to have a 0ms timeout before invoking raf. And indeed, once I’ve added the following to the container:

componentDidMount() {
  setTimeout(() => this.refs.scrollbars.forceUpdate(), 0);
}

… the issue went away.

Sorry for not providing a way to repro, this is as much time as I can commit to this, unfortunately.

[alecmev]

Sorry, not yet, simply don’t have the energy. I suppose this can be closed, until further notice. Your call.

[malte-wessel]

Any updates on this?