From 40a7d878323165e47810f561d804c491f7567a42 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sun, 15 Jun 2025 14:25:30 +0200
Subject: [PATCH] Fix jittering of clock markers

---
 clock.js  | 5 ++---
 style.css | 4 ++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/clock.js b/clock.js
index 86c4f7e..8ae9e7b 100644
--- a/clock.js
+++ b/clock.js
@@ -74,8 +74,7 @@
     }
 
     // Unified radius based on the actual clock size
-    const rect = clock.getBoundingClientRect();
-    const baseRadius = rect.width / 2;
+    const baseRadius = clock.offsetWidth / 2;
 
     // Tick lengths relative to the clock radius
     const lenBig = baseRadius * 0.12;
@@ -86,7 +85,7 @@
 
     // Distance from center for the marker digits so they sit just inside big ticks
     const markerSize = markers[0] ? markers[0].offsetWidth : 0;
-    const markerRadius = outerR - lenBig - markerSize * getMarkerOffset(rect.width);
+    const markerRadius = outerR - lenBig - markerSize * getMarkerOffset(clock.offsetWidth);
 
     markers.forEach((m, i) => {
       const angle = (i / 16) * 2 * Math.PI;
diff --git a/style.css b/style.css
index f9eade1..1691758 100644
--- a/style.css
+++ b/style.css
@@ -454,6 +454,10 @@ body.fullscreen-clock .clock-label {
   text-shadow: 0 0 6px rgba(0, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7);
   box-shadow: none;
   transform-origin: center;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  pointer-events: none;
+  will-change: transform;
   z-index: 1;
 }