Merge pull request #1120 from thelounge/xpaw/scroll-perf

Include trickery to reduce paints and improve performance

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);
+	right: -180px;
-	transform: translate3d(180px, 0, 0);
 }
 
 #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;
+	transition: right .4s;
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
 }
 
 #chat .show-more {
@@ -1164,6 +1162,7 @@ kbd {
 	bottom: 0;
 	overflow: auto;
 	overflow-x: hidden;
+	will-change: transform, scroll-position;
 	-webkit-overflow-scrolling: touch;
 	padding-bottom: 10px;
 	position: absolute;
@@ -1850,11 +1849,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;
@@ -1889,22 +1883,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;

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,