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,21 +127,42 @@ 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 (
-			onScroll={this.handleScroll}
+			<React.Fragment>
-			ref='main'
+				<div className='brewRenderer'
-			style={{ height: this.state.height }}>
+					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} />
+					<ErrorBar errors={this.props.errors} />
-			<RenderWarnings />
+					<RenderWarnings />
 
-			<div className='pages' ref='pages'>
+					<div className='pages' ref='pages'>
-				{this.renderPages()}
+						{this.renderPages()}
-			</div>
+					</div>
-			{this.renderPageInfo()}
+				</div>;
-			{this.renderPPRmsg()}
+				{this.renderPageInfo()}
-		</div>;
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
 	}
 });
 

client/homebrew/brewRenderer/brewRenderer.less

@@ -5,28 +5,6 @@
 }
 .brewRenderer{
 	overflow-y : scroll;
-	.pageInfo{
-		position         : absolute;
-		right            : 17px;
-		bottom           : 0;
-		z-index          : 1000;
-		padding          : 8px 10px;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-	}
-	.ppr_msg{
-		position         : absolute;
-		left             : 0px;
-		bottom           : 0;
-		z-index          : 1000;
-		padding          : 8px 10px;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-	}
 	.pages{
 		margin : 30px 0px;
 		&>.phb{
@@ -37,3 +15,25 @@
 		}
 	}
 }
+.pageInfo{
+	position         : absolute;
+	right            : 17px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}
+.ppr_msg{
+	position         : absolute;
+	left             : 0px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}