From 935b193a64e4c16c6ebf3a1ad48b2e519868768d Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Sun, 15 Dec 2019 18:13:52 +0200
Subject: [PATCH] Round down image transform in image viewer to fix blurry
 images

---
 client/components/ImageViewer.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/components/ImageViewer.vue b/client/components/ImageViewer.vue
index 0e10c5d6..3b97519d 100644
--- a/client/components/ImageViewer.vue
+++ b/client/components/ImageViewer.vue
@@ -45,10 +45,15 @@ export default {
 	},
 	computed: {
 		computeImageStyles() {
+			// Sub pixels may cause the image to blur in certain browsers
+			// round it down to prevent that
+			const transformX = Math.floor(this.transform.x);
+			const transformY = Math.floor(this.transform.y);
+
 			return {
 				left: `${this.position.x}px`,
 				top: `${this.position.y}px`,
-				transform: `translate3d(${this.transform.x}px, ${this.transform.y}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`,
+				transform: `translate3d(${transformX}px, ${transformY}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`,
 			};
 		},
 	},
@@ -87,8 +92,8 @@ export default {
 			const height = viewer.offsetHeight;
 			const scale = Math.min(1, width / image.width, height / image.height);
 
-			this.position.x = -image.naturalWidth / 2;
-			this.position.y = -image.naturalHeight / 2;
+			this.position.x = Math.floor(-image.naturalWidth / 2);
+			this.position.y = Math.floor(-image.naturalHeight / 2);
 			this.transform.scale = Math.max(scale, 0.1);
 			this.transform.x = width / 2;
 			this.transform.y = height / 2;