Force browser repaint after closing Print dialog

client/homebrew/brewRenderer/brewRenderer.less

@@ -72,7 +72,7 @@
 		.pages {
 			margin: 0px;
 			&>.page {
-			box-shadow: unset;
+				box-shadow: unset;
 			}
 		}
 	}

client/homebrew/navbar/print.navitem.jsx

@@ -1,13 +1,8 @@
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-module.exports = function(props){
+module.exports = function({printFunction}){
-	const printPage = () => {
+	return <Nav.item onClick={printFunction} color='purple' icon='far fa-file-pdf'>
-		if (window.typeof !== 'undefined')
-			window.frames['BrewRenderer'].contentWindow.print();
-	};
-
-	return <Nav.item onClick={printPage} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;
 };

client/homebrew/pages/editPage/editPage.jsx

@@ -95,13 +95,24 @@ const EditPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
+		if(e.keyCode == P_KEY) this.printPage();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
+	printPage : function(){
+		if (window.typeof !== 'undefined') {
+			window.frames['BrewRenderer'].contentWindow.print();
+			//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+			let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+			node.style.display='none';
+			node.offsetHeight; // accessing this is enough to trigger a reflow
+			node.style.display='';
+		}
+	},
+
 	handleSplitMove : function(){
 		this.editor.current.update();
 	},
@@ -378,7 +389,7 @@ const EditPage = createClass({
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintNavItem/>
+				<PrintNavItem printFunction={this.printPage}/>
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>

client/homebrew/pages/newPage/newPage.jsx

@@ -90,13 +90,24 @@ const NewPage = createClass({
 		const S_KEY = 83;
 		const P_KEY = 80;
 		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
+		if(e.keyCode == P_KEY) this.printPage();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
+	printPage : function(){
+		if (window.typeof !== 'undefined') {
+			window.frames['BrewRenderer'].contentWindow.print();
+			//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+			let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+			node.style.display='none';
+			node.offsetHeight; // accessing this is enough to trigger a reflow
+			node.style.display='';
+		}
+	},
+
 	handleSplitMove : function(){
 		this.editor.current.update();
 	},
@@ -181,10 +192,6 @@ const NewPage = createClass({
 		}
 	},
 
-	print : function(){
-		window.open('/print?dialog=true&local=print', '_blank');
-	},
-
 	renderNavbar : function(){
 		return <Navbar>
 
@@ -197,7 +204,7 @@ const NewPage = createClass({
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
 					this.renderSaveButton()
 				}
-				<PrintNavItem/>
+				<PrintNavItem printFunction={this.printPage}/><PrintNavItem/>
 				<HelpNavItem />
 				<RecentNavItem />
 				<AccountNavItem />

client/homebrew/pages/sharePage/sharePage.jsx

@@ -35,12 +35,23 @@ const SharePage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;
 		if(e.keyCode == P_KEY){
-			if(e.keyCode == P_KEY) window.frames['BrewRenderer'].contentWindow.print();
+			if(e.keyCode == P_KEY) this.printPage();
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	},
 
+	printPage : function(){
+		if (window.typeof !== 'undefined') {
+			window.frames['BrewRenderer'].contentWindow.print();
+			//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+			let node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
+			node.style.display='none';
+			node.offsetHeight; // accessing this is enough to trigger a reflow
+			node.style.display='';
+		}
+	},
+
 	processShareId : function() {
 		return this.props.brew.googleId && !this.props.brew.stubbed ?
 					 this.props.brew.googleId + this.props.brew.shareId :
@@ -72,7 +83,7 @@ const SharePage = createClass({
 
 				<Nav.section>
 					{this.props.brew.shareId && <>
-						<PrintNavItem/>
+						<PrintNavItem printFunction={this.printPage}/>
 						<Nav.dropdown>
 							<Nav.item color='red' icon='fas fa-code'>
 								source