After "Warning: `NaN` is an invalid value for the `marginTop` css style property." scrollbar locks

[cbazza]

I am using the most basic setup, here is the code:

            <ScrollArea speed={0.8} smoothScrolling={true} className="area" contentClassName="content" horizontal={false}>
                <div className="col-xs-3 tab-wrapper">
                    <ul className="nav nav-tabs tabs-left sideways">
                        {showSupport?
                            <li className={this.state.tabNum == 0?"active":""}>
                                <a onClick={() => this.onClick(0)}>Support</a>
                            </li>
                        :undefined}
                        {showBilling?
                            <li className={this.state.tabNum == 1?"active":""}>
                                <a onClick={() => this.onClick(1)}>Billing</a>
                            </li> 
                        :undefined}
                        {showPlan?
                            <li className={this.state.tabNum == 2?"active":""}>
                                <a onClick={() => this.onClick(2)}>Plan</a>
                            </li>
                        :undefined}
                        {this.props.hasDevice?
                            <li className={this.state.tabNum == 3?"active":""}>
                                <a onClick={() => this.onClick(3)}>Device</a>
                            </li>
                        :undefined}
                        {showKitOrder?
                            <li className={this.state.tabNum == 4?"active":""}>
                                <a onClick={() => this.onClick(4)}>Kit Order</a>
                            </li>
                        :undefined}
                    </ul>
                </div>
                <div className="col-xs-9 content-wrapper">
                    <div className="tab-content">
                        {showSupport?
                            <div className={"tab-pane " + (this.state.tabNum==0?"active":"")}>
                                <SupportPanel app={this.props.app}/>
                            </div>
                        :undefined}
                        {showBilling?
                            <div className={"tab-pane " + (this.state.tabNum==1?"active":"")}>
                                <BillingPanel ref="billingPanel" app={this.props.app}/>
                            </div>
                        :undefined}
                        {showPlan?
                            <div className={"tab-pane " + (this.state.tabNum==2?"active":"")}>
                                <PlanPanel app={this.props.app} gotoBilling={this.gotoTab.bind(this,"billing")}/>
                            </div>
                        :undefined}
                        {this.props.hasDevice?
                            <div className={"tab-pane " + (this.state.tabNum==3?"active":"")}>
                                <DeviceConfigPanel ref="deviceConfigPanel" app={this.props.app}/>
                            </div>
                        :undefined}
                        {showKitOrder?
                            <div className={"tab-pane " + (this.state.tabNum==4?"active":"")}>
                                <KitOrder app={this.props.app} gotoBilling={this.gotoTab.bind(this,"billing")}/>
                            </div>
                        :undefined}
                    </div>
                </div>
            </ScrollArea>

The code starts with the default tab opened (tabNum == 3). If I scroll that tab and then switch tabs and scroll again, it works great BUT if on start on tabNum 3 I do nothing but switch tabs and then try to scroll, I see an error msg on console and the scroller locks. Here is the message:

console.js?93a0:26 Warning: `NaN` is an invalid value for the `marginTop` css style property.console.(anonymous function) @ console.js?93a0:26warning @ warning.js?0260:44warnStyleValueIsNaN @ CSSPropertyOperations.js?222a:88warnValidStyle @ CSSPropertyOperations.js?222a:120setValueForStyles @ CSSPropertyOperations.js?222a:176CSSPropertyOperations_setValueForStyles @ ReactPerf.js?ef93:66_updateDOMProperties @ ReactDOMComponent.js?1302:802updateComponent @ ReactDOMComponent.js?1302:690receiveComponent @ ReactDOMComponent.js?1302:647ReactDOMComponent_receiveComponent @ ReactPerf.js?ef93:66receiveComponent @ ReactReconciler.js?6bfa:103updateChildren @ ReactChildReconciler.js?ff46:85_reconcilerUpdateChildren @ ReactMultiChild.js?c87d:178_updateChildren @ ReactMultiChild.js?c87d:271updateChildren @ ReactMultiChild.js?c87d:259_updateDOMChildren @ ReactDOMComponent.js?1302:845updateComponent @ ReactDOMComponent.js?1302:691receiveComponent @ ReactDOMComponent.js?1302:647ReactDOMComponent_receiveComponent @ ReactPerf.js?ef93:66receiveComponent @ ReactReconciler.js?6bfa:103_updateRenderedComponent @ ReactCompositeComponent.js?cd59:661_performComponentUpdate @ ReactCompositeComponent.js?cd59:643updateComponent @ ReactCompositeComponent.js?cd59:572ReactCompositeComponent_updateComponent @ ReactPerf.js?ef93:66performUpdateIfNecessary @ ReactCompositeComponent.js?cd59:511performUpdateIfNecessary @ ReactReconciler.js?6bfa:122runBatchedUpdates @ ReactUpdates.js?ce09:143perform @ Transaction.js?6dff:136perform @ Transaction.js?6dff:136perform @ ReactUpdates.js?ce09:89flushBatchedUpdates @ ReactUpdates.js?ce09:165ReactUpdates_flushBatchedUpdates @ ReactPerf.js?ef93:66closeAll @ Transaction.js?6dff:202perform @ Transaction.js?6dff:149batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:63enqueueUpdate @ ReactUpdates.js?ce09:194enqueueUpdate @ ReactUpdateQueue.js?fd2c:22enqueueSetState @ ReactUpdateQueue.js?fd2c:201ReactComponent.setState @ ReactComponent.js?a225:65animationRender @ scrollArea.js?5ff8:1t @ scrollArea.js?5ff8:1
console.js?93a0:26 [WDS] Proxy error.