diff --git a/app/assets/javascripts/magic-magnifier.js b/app/assets/javascripts/magic-magnifier.js
index 50aad10e..44dd0d56 100644
--- a/app/assets/javascripts/magic-magnifier.js
+++ b/app/assets/javascripts/magic-magnifier.js
@@ -1,4 +1,6 @@
 class MagicMagnifier extends HTMLElement {
+	#internals = this.attachInternals();
+
 	connectedCallback() {
 		setTimeout(() => this.#attachLens(), 0);
 		this.addEventListener("mousemove", this.#onMouseMove);
@@ -18,6 +20,7 @@ class MagicMagnifier extends HTMLElement {
 		const y = e.clientY - rect.top;
 		this.style.setProperty("--magic-magnifier-x", x + "px");
 		this.style.setProperty("--magic-magnifier-y", y + "px");
+		this.#internals.states.add("ready");
 	}
 }
 
diff --git a/app/assets/stylesheets/application/magic-magnifier.sass b/app/assets/stylesheets/application/magic-magnifier.sass
index cd05acca..fbd83038 100644
--- a/app/assets/stylesheets/application/magic-magnifier.sass
+++ b/app/assets/stylesheets/application/magic-magnifier.sass
@@ -7,10 +7,11 @@ magic-magnifier
 	magic-magnifier-lens
 		display: none
 
-	&:hover
-		@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
-			magic-magnifier-lens
-				display: block
+	// TODO: Once container query support is broader, we can remove the CSS state
+	//       and read for the presence of the X and Y custom properties instead.
+	&:hover:state(ready)
+		magic-magnifier-lens
+			display: block
 
 magic-magnifier-lens
 	width: var(--magic-magnifier-lens-width, 100px)