From 019484b6dd37e9e56dad6af3e63fd15684ffe358 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sat, 28 Dec 2024 16:08:28 -0800 Subject: [PATCH] Oops, fix showing the magic magnifier in Firefox Oh, guess Firefox doesn't support this CSS container query feature yet! Use a more compatible technique instead. --- app/assets/javascripts/magic-magnifier.js | 3 +++ app/assets/stylesheets/application/magic-magnifier.sass | 9 +++++---- 2 files changed, 8 insertions(+), 4 deletions(-) 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)