diff --git a/app/assets/javascripts/magic-magnifier.js b/app/assets/javascripts/magic-magnifier.js
index 2d3ed82f..f671bf45 100644
--- a/app/assets/javascripts/magic-magnifier.js
+++ b/app/assets/javascripts/magic-magnifier.js
@@ -16,8 +16,8 @@ class MagicMagnifier extends HTMLElement {
 		const rect = this.getBoundingClientRect();
 		const x = e.pageX - rect.left;
 		const y = e.pageY - rect.top;
-		lens.style.setProperty("--magic-magnifier-x", x + "px");
-		lens.style.setProperty("--magic-magnifier-y", y + "px");
+		this.style.setProperty("--magic-magnifier-x", x + "px");
+		this.style.setProperty("--magic-magnifier-y", y + "px");
 	}
 }
 
diff --git a/app/assets/stylesheets/application/magic-magnifier.sass b/app/assets/stylesheets/application/magic-magnifier.sass
index 79752e76..cd05acca 100644
--- a/app/assets/stylesheets/application/magic-magnifier.sass
+++ b/app/assets/stylesheets/application/magic-magnifier.sass
@@ -1,9 +1,16 @@
 magic-magnifier
 	position: relative
 
-	&:not(:hover)
-		magic-magnifier-lens
-			display: none
+	// Only show the lens when we are hovering, and the magnifier's X and Y
+	// coordinates are set. (This ensures the component is running, and has
+	// received a mousemove event, instead of defaulting to (0, 0).)
+	magic-magnifier-lens
+		display: none
+
+	&:hover
+		@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
+			magic-magnifier-lens
+				display: block
 
 magic-magnifier-lens
 	width: var(--magic-magnifier-lens-width, 100px)