From 3bc4bf2cb95c1bcf61a10d8b892ee9ccaeffcf2d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 3 Aug 2026 23:31:55 -0700 Subject: The unread dot holds still It looked like the dot was flickering on and off after a refresh. It wasn't: measured over the first twelve seconds it appeared once and never went away, while its entrance animation started seven separate times. render() rebuilds the whole DOM, so the pop replayed on every repaint. A dot that means 'someone is waiting' has nothing to animate about, so the animation is gone rather than gated. tools/unread-dot-test.js counts animation starts against real appear/disappear transitions, so a future entrance effect here fails instead of shipping as a flicker. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi --- src/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/style.css b/src/style.css index 5d98aa1..ea29891 100644 --- a/src/style.css +++ b/src/style.css @@ -428,9 +428,11 @@ hr.divider { margin: 16px 0; } .header-msgs.unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); - box-shadow: 0 0 0 2px var(--bg); animation: dot-pop .3s ease-out; + /* No entrance animation: render() rebuilds the whole DOM, so a pop here + replayed on every repaint and read as the dot flashing. It either says + someone is waiting or it doesn't. */ + box-shadow: 0 0 0 2px var(--bg); } -@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } } .chat-avatar.header-ava { width: 30px; height: 30px; font-size: 11px; } .npub-box { display: flex; align-items: center; gap: 8px; } .copy-ico { flex-shrink: 0; background: none; border: none; padding: 2px; color: var(--muted); cursor: pointer; display: flex; } -- cgit v1.2.3