From 28fbe785b7469eda3ab1569ec92a7638dbc4809f Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 19 Jun 2026 15:26:40 +1000 Subject: [PATCH] fix: pin subtitle-badge and action-button icons with translateZ(0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The #782 fix only pinned the left marker icon (.timeline-icon) onto its own compositing layer. The subtitle review badges (.meta-badge) and the hover-revealed action-button icons (.timeline-actions svg) were left unpinned, so the row's hover background-color transition re-rasterized them and re-snapped them to fractional device pixels — the residual ~1px jiggle. Extend the same per-element layer hint to those two sites, keeping it on the small elements to preserve #775's per-row memory win. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: Matt Toohey --- .../src/lib/features/timeline/TimelineRow.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index 37146307..0ac0f305 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -845,6 +845,10 @@ font-size: calc(var(--size-xs) - 1px); font-weight: 600; line-height: 1; + /* Pin the review badge onto its own compositing layer (same rationale as + .timeline-icon) so its icon stays put during the row's hover + background-color transition instead of re-snapping to fractional pixels. */ + transform: translateZ(0); } /* Actions container — visible on row hover */ @@ -857,6 +861,12 @@ transition: opacity 0.1s; } + /* Pin each action-button icon onto its own layer so it doesn't jiggle during + the container's opacity fade or the Button's transition-all on hover. */ + .timeline-actions :global(svg) { + transform: translateZ(0); + } + .timeline-row:hover .timeline-actions, .timeline-actions.always-visible { opacity: 1;