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,
@@ -126,11 +127,30 @@ 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'
+		return (
+			<React.Fragment>
+				<div className='brewRenderer'
 					onScroll={this.handleScroll}
+					onMouseOver={this.prepareScroll}
+					onMouseOut={this.unprepareScroll}
 					ref='main'
-			style={{ height: this.state.height }}>
+					style={{ height: 	 this.state.height,
+							 willChange: this.state.willChange}}>
 
 					<ErrorBar errors={this.props.errors} />
 					<RenderWarnings />
@@ -138,9 +158,11 @@ const BrewRenderer = createClass({
 					<div className='pages' ref='pages'>
 						{this.renderPages()}
 					</div>
+				</div>;
 				{this.renderPageInfo()}
 				{this.renderPPRmsg()}
-		</div>;
+			</React.Fragment>
+		);
 	}
 });
 

client/homebrew/brewRenderer/brewRenderer.less

@@ -5,6 +5,16 @@
 }
 .brewRenderer{
 	overflow-y : scroll;
+	.pages{
+		margin : 30px 0px;
+		&>.phb{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
+	}
+}
 .pageInfo{
 	position         : absolute;
 	right            : 17px;
@@ -27,13 +37,3 @@
 	font-weight      : 800;
 	color            : white;
 }
-	.pages{
-		margin : 30px 0px;
-		&>.phb{
-			margin-right  : auto;
-			margin-bottom : 30px;
-			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
-		}
-	}
-}