diff --git a/clock.js b/clock.js index 25f21ba..0ad372e 100644 --- a/clock.js +++ b/clock.js @@ -134,14 +134,14 @@ el.removeEventListener('transitionend', handle); // Snap back without animation el.style.transition = 'none'; - el.style.transform = `translateX(-50%) rotate(${angle}deg)`; + el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`; void el.offsetWidth; el.style.transition = ''; }; el.addEventListener('transitionend', handle, { once: true }); - el.style.transform = `translateX(-50%) rotate(${target}deg)`; + el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`; } else { - el.style.transform = `translateX(-50%) rotate(${angle}deg)`; + el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`; } lastAngles[id] = angle; diff --git a/style.css b/style.css index 87fd188..6da2e50 100644 --- a/style.css +++ b/style.css @@ -404,7 +404,7 @@ left: 50%; width: calc(var(--clock-size) * 0.15); height: calc(var(--clock-size) * 0.15); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%) translateZ(0); background: url('logo.svg') center/contain no-repeat; background-color: #ffffff; border-radius: 50%; @@ -413,6 +413,13 @@ pointer-events: none; } +@media screen and (min-width: 1200px) { + .clock-center { + width: calc(var(--clock-size) * 0.105); + height: calc(var(--clock-size) * 0.105); + } +} + .clock-label { position: absolute; bottom: 30%;