Skip to content

fix: pin subtitle-badge and action-button icons with translateZ(0) - #803

Merged
matt2e merged 1 commit into
mainfrom
still-jiggling
Jun 19, 2026
Merged

fix: pin subtitle-badge and action-button icons with translateZ(0)#803
matt2e merged 1 commit into
mainfrom
still-jiggling

Conversation

@matt2e

@matt2e matt2e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Stops timeline-row icons from jiggling/re-snapping to fractional pixels during hover transitions by promoting them onto their own compositing layers.

Changes

  • Review badge (.subtitle-badge): add transform: translateZ(0) so its icon stays put during the row's hover background-color transition (same rationale as .timeline-icon).
  • Action-button icons (.timeline-actions :global(svg)): add transform: translateZ(0) so they don't jiggle during the container's opacity fade or the Button's transition-all on hover.

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) <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
@matt2e
matt2e requested review from baxen and wesbillman as code owners June 19, 2026 05:51
@matt2e
matt2e merged commit ebf8752 into main Jun 19, 2026
5 checks passed
@matt2e
matt2e deleted the still-jiggling branch June 19, 2026 06:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant