From 2969f6f9a7d5a044bcb4556967f7a64ca3a83873 Mon Sep 17 00:00:00 2001
From: Alex Dilley <alex.dilley@gmail.com>
Date: Tue, 6 Aug 2019 09:16:35 +0100
Subject: [PATCH] hardware-accelerated transitions

---
 src/runtime/animate/index.ts       | 2 +-
 src/runtime/internal/animations.ts | 2 +-
 src/runtime/transition/index.ts    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts
index d00d23c98d..fcf2a823f5 100644
--- a/src/runtime/animate/index.ts
+++ b/src/runtime/animate/index.ts
@@ -35,6 +35,6 @@ export function flip(node: Element, animation: { from: DOMRect; to: DOMRect }, p
 		delay,
 		duration: is_function(duration) ? duration(d) : duration,
 		easing,
-		css: (_t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);`
+		css: (_t, u) => `transform: ${transform} translate3d(${u * dx}px, ${u * dy}px, 0);`
 	};
 }
diff --git a/src/runtime/internal/animations.ts b/src/runtime/internal/animations.ts
index 6dc6a446f6..ee0a11edc8 100644
--- a/src/runtime/internal/animations.ts
+++ b/src/runtime/internal/animations.ts
@@ -98,6 +98,6 @@ export function add_transform(node: Element & ElementCSSInlineStyle, a: Position
 		const style = getComputedStyle(node);
 		const transform = style.transform === 'none' ? '' : style.transform;
 
-		node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;
+		node.style.transform = `${transform} translate3d(${a.left - b.left}px, ${a.top - b.top}px, 0)`;
 	}
 }
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index d89730fd6b..175382c273 100644
--- a/src/runtime/transition/index.ts
+++ b/src/runtime/transition/index.ts
@@ -55,7 +55,7 @@ export function fly(node: Element, {
 		duration,
 		easing,
 		css: (t, u) => `
-			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			transform: ${transform} translate3d(${(1 - t) * x}px, ${(1 - t) * y}px, 0);
 			opacity: ${target_opacity - (od * u)}`
 	};
 }
@@ -203,7 +203,7 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
 			css: (t, u) => `
 				opacity: ${t * opacity};
 				transform-origin: top left;
-				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
+				transform: ${transform} translate3d(${u * dx}px,${u * dy}px,0) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
 			`
 		};
 	}