From 518160a1fa57b66116197428bf51589ede64cde8 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sun, 30 Apr 2017 13:20:43 +0300
Subject: [PATCH 1/2] Include trickery to reduce paints and improve performance

Fixes #1083.
Fixes #1071.
---
 client/css/style.css | 37 ++++++++++++-------------------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 9f731c39..e858c4a4 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -140,10 +140,6 @@ kbd {
 .container {
 	margin: 80px auto;
 	max-width: 480px;
-	overflow: hidden;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-	padding: 0 30px;
 }
 
 ::-moz-placeholder {
@@ -374,8 +370,7 @@ kbd {
 }
 
 #viewport.rt #chat .sidebar {
-	-webkit-transform: translate3d(180px, 0, 0);
-	transform: translate3d(180px, 0, 0);
+	right: -180px;
 }
 
 #sidebar {
@@ -389,6 +384,10 @@ kbd {
 	width: 220px;
 }
 
+#viewport.menu-open #sidebar {
+	will-change: transform;
+}
+
 #sidebar button,
 #sidebar .chan,
 #sidebar .sign-out {
@@ -764,6 +763,7 @@ kbd {
 	left: 0;
 	right: 0;
 	overflow: auto;
+	will-change: transform, scroll-position;
 	-webkit-overflow-scrolling: touch;
 	position: absolute;
 }
@@ -787,9 +787,7 @@ kbd {
 	position: absolute;
 	right: 0;
 	width: 180px;
-	transition: all .4s;
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
+	transition: right .4s;
 }
 
 #chat .show-more {
@@ -1162,6 +1160,7 @@ kbd {
 	bottom: 0;
 	overflow: auto;
 	overflow-x: hidden;
+	will-change: transform, scroll-position;
 	-webkit-overflow-scrolling: touch;
 	padding-bottom: 10px;
 	position: absolute;
@@ -1829,11 +1828,6 @@ kbd {
 		margin-top: 60px !important;
 	}
 
-	#viewport.rt #chat .sidebar {
-		-webkit-transform: translate3d(-180px, 0, 0);
-		transform: translate3d(-180px, 0, 0);
-	}
-
 	#sidebar,
 	#footer {
 		left: -220px;
@@ -1868,22 +1862,15 @@ kbd {
 		right: -180px;
 	}
 
+	#viewport.rt #chat .sidebar {
+		right: 0;
+	}
+
 	#chat .title:before {
 		display: none;
 	}
 }
 
-@media (min-width: 769px) {
-	#viewport {
-		-webkit-transform: none !important;
-		transform: none !important;
-	}
-
-	#viewport.menu-open {
-		transition: none;
-	}
-}
-
 @media (max-width: 479px) {
 	.container {
 		margin: 40px 0 !important;

From 7ec0dcfec8e29efb41c1e38619e09ff19afdde56 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sun, 30 Apr 2017 13:42:59 +0300
Subject: [PATCH 2/2] Mark touch events as passive

---
 client/js/libs/slideout.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/js/libs/slideout.js b/client/js/libs/slideout.js
index 34faa9a8..93ec86c1 100644
--- a/client/js/libs/slideout.js
+++ b/client/js/libs/slideout.js
@@ -23,7 +23,7 @@ module.exports = function slideoutMenu(viewport, menu) {
 	function onTouchStart(e) {
 		if (e.touches.length !== 1) {
 			onTouchEnd();
-			return false;
+			return;
 		}
 
 		var touch = e.touches.item(0);
@@ -37,7 +37,7 @@ module.exports = function slideoutMenu(viewport, menu) {
 			touchStartTime = Date.now();
 
 			viewport.addEventListener("touchmove", onTouchMove);
-			viewport.addEventListener("touchend", onTouchEnd);
+			viewport.addEventListener("touchend", onTouchEnd, {passive: true});
 		}
 	}
 
@@ -91,7 +91,7 @@ module.exports = function slideoutMenu(viewport, menu) {
 		menuIsMoving = false;
 	}
 
-	viewport.addEventListener("touchstart", onTouchStart);
+	viewport.addEventListener("touchstart", onTouchStart, {passive: true});
 
 	return {
 		disable: disableSlideout,