Optimize for smooth scrolling of BrewRenderer

The will-change property allows the browser to optimize for smoother animations. This completely eliminates the scrolling stutter.

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -25,6 +25,7 @@ const BrewRenderer = createClass({
 		return {
 			viewablePageNumber : 0,
 			height             : 0,
+			willChange		   : 'auto',
 			isMounted          : false,
 
 			usePPR : true,
@@ -125,22 +126,43 @@ const BrewRenderer = createClass({
 		});
 		return this.lastRender;
 	},
+	
+	/**
+	*	Optimize for smooth scrolling when mouse enters the rendering panel 
+	**/
+	prepareScroll : function(){
+		this.setState({willChange : 'transform'});
+	},
+	
+	/**
+	*	Unload smooth scrolling optimizations when mouse leaves rendering panel
+	**/
+	unprepareScroll : function(){
+		this.setState({willChange : 'auto'});
+	},
 
 	render : function(){
-		return <div className='brewRenderer'
-			onScroll={this.handleScroll}
-			ref='main'
-			style={{ height: this.state.height }}>
+		return (
+			<React.Fragment>
+				<div className='brewRenderer'
+					onScroll={this.handleScroll}
+					onMouseOver={this.prepareScroll}
+					onMouseOut={this.unprepareScroll}
+					ref='main'
+					style={{ height: 	 this.state.height,
+							 willChange: this.state.willChange}}>
 
-			<ErrorBar errors={this.props.errors} />
-			<RenderWarnings />
+					<ErrorBar errors={this.props.errors} />
+					<RenderWarnings />
 
-			<div className='pages' ref='pages'>
-				{this.renderPages()}
-			</div>
-			{this.renderPageInfo()}
-			{this.renderPPRmsg()}
-		</div>;
+					<div className='pages' ref='pages'>
+						{this.renderPages()}
+					</div>
+				</div>;
+				{this.renderPageInfo()}
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
 	}
 });