claude-code - 💡(How to fix) Fix [BUG] Claude-in-Chrome agent glow border pegs GPU at ~150% on 120Hz displays [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
anthropics/claude-code#52826Fetched 2026-04-25 06:19:52
View on GitHub
Comments
1
Participants
2
Timeline
6
Reactions
0
Author
Timeline (top)
labeled ×5commented ×1

Error Message

Error Messages / Logs

Root Cause

Why this happens: a viewport-sized element with an infinite animation forces a fresh compositor frame at the display's refresh rate. On 60Hz that's already wasteful for a decorative indicator; on 120Hz it doubles. transform/opacity animations are normally cheap because they only invalidate a small compositor layer — but when the layer is the viewport, that optimization doesn't apply.

Code Example

document.getElementById('claude-agent-glow-border').style.animation = 'none';

---

<style id="claude-agent-animation-styles">  /* defines @keyframes claude-pulse */
<div id="claude-agent-glow-border" style="animation: claude-pulse 2s infinite …">
RAW_BUFFERClick to expand / collapse

Preflight Checklist

  • I have searched existing issues and this hasn't been reported yet
  • This is a single bug report
  • I am using the latest version of Claude Code

What's Wrong?

The Claude Chrome extension injects a full-viewport <div id="claude-agent-glow-border"> on every tab an MCP session attaches to, and animates it with an infinite 2s claude-pulse CSS animation. The div covers the whole viewport (1200×1978px on my window), so on a 120Hz ProMotion display Chrome re-composites the entire screen at ~120fps. The shared Chrome GPU process sits at 140–150% CPU and macOS reports ~98% GPU utilization the whole time the attached tab is in front.

Switch to any other tab and GPU drops to ~10% instantly. The page underneath is completely idle — no user JS, no animations of its own. It's just the indicator.

What Should Happen?

The agent-active indicator shouldn't generate a full-viewport composite at the display's refresh rate. Any of these would fix it:

  • Render the glow as a thin border (four fixed-position edge divs, or box-shadow: inset) so only a narrow band re-composites.
  • Cap effective frame rate via steps(N) timing or fewer keyframes.
  • Respect prefers-reduced-motion.
  • Pause the animation while the agent is idle (thinking/waiting on the user) — it doesn't need a 120fps indicator when nothing's happening.
  • Expose a setting to disable it.

Steps to Reproduce

  1. Install the Claude Chrome extension and attach an MCP session to any tab on a 120Hz display (MacBook Pro w/ ProMotion, or any high-refresh external monitor).
  2. Watch "Google Chrome Helper (GPU)" in Activity Monitor.
  3. It sits at 140–150% CPU while the attached tab is foregrounded.
  4. In DevTools on that tab:
    document.getElementById('claude-agent-glow-border').style.animation = 'none';
  5. GPU drops to ~0–3% within 2s. Confirmed by polling ps -p <gpu_pid> -o pcpu= every 500ms.

Error Messages / Logs

None — no errors, just continuous compositor load.

Measurements (macOS, Chrome 147.0.7727.56, M3 Max MacBook Pro, ProMotion 120Hz):

StateChrome GPU process CPUmacOS GPU utilization
Attached tab visible, glow active~140–150%~98%
Attached tab backgrounded~10%~10%
Glow animation paused, tab still visible~0–3%

Is this a regression?

I don't know

Claude Code Version

2.1.119 (Claude Code)

Chrome extension version: 1.0.68 (Claude in Chrome Beta, id fcoeoabgfenejglbffodgkkbkcdhcgfn)

Platform

Anthropic API

Operating System

macOS

Additional Information

Why this happens: a viewport-sized element with an infinite animation forces a fresh compositor frame at the display's refresh rate. On 60Hz that's already wasteful for a decorative indicator; on 120Hz it doubles. transform/opacity animations are normally cheap because they only invalidate a small compositor layer — but when the layer is the viewport, that optimization doesn't apply.

Relevant injected nodes (both survive across page loads on the attached tab):

<style id="claude-agent-animation-styles">  /* defines @keyframes claude-pulse */
<div id="claude-agent-glow-border" style="animation: claude-pulse 2s infinite …">

extent analysis

TL;DR

The issue can be fixed by modifying the Claude Chrome extension to optimize the animation of the claude-agent-glow-border element to reduce GPU utilization.

Guidance

  • Modify the CSS animation to use steps(N) timing or fewer keyframes to cap the effective frame rate.
  • Consider rendering the glow as a thin border using four fixed-position edge divs or box-shadow: inset to reduce the compositor load.
  • Add a setting to expose an option to disable the animation or pause it when the agent is idle.
  • Verify the fix by monitoring the GPU utilization in Activity Monitor and checking the Chrome GPU process CPU usage.

Example

#claude-agent-glow-border {
  animation: claude-pulse 2s infinite steps(10); /* cap the frame rate */
}

Notes

The issue is specific to high-refresh rate displays and can be mitigated by optimizing the animation. The provided measurements and code snippets suggest that the issue is related to the infinite animation of the claude-agent-glow-border element.

Recommendation

Apply a workaround by modifying the CSS animation to reduce the GPU utilization, as the root cause is related to the animation and not a regression in the Claude Code version.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING