CR: Waybar CSS Performance Remediation

1. Change Summary

Field Value

CR ID

CR-2026-04-04-waybar-css-performance

Date

2026-04-04

Priority

P1 - High (hardware thermal risk)

Type

Configuration Remediation

Status

Complete

Requestor

Evan Rosado

Implementor

Evan Rosado

Risk Level

Low (visual-only changes, no functional impact)

Systems Affected

modestus-razer — ~/.config/waybar/style.css, ~/.config/waybar/config

Predecessor

N/A

Related INC

INC: Razer High Fan/Temp

2. Objective

Remove GTK3-hostile CSS properties (box-shadow, infinite animation, transition: all) from the waybar Catppuccin Mocha / Glass Island theme to eliminate a CPU rendering loop that drove waybar to 50-96% CPU and CPU temperatures to 86°C.

3. Background

On 2026-04-04, modestus-razer exhibited sudden high fan noise and elevated temperatures. Investigation traced the root cause to waybar’s style.css — a 605-line Catppuccin theme using box-shadow with alpha() compositing, 7 infinite CSS animations, and 4 transition: all rules. GTK3’s CSS engine renders box-shadow in software (CPU), not GPU. Combined with animations forcing constant repaints, the rendering pipeline degraded over ~44 hours of uptime into a sustained CPU spin.

See INC-2026-04-04-001 for full investigation timeline.

4. Changes Applied

4.1. 1. Removed box-shadow Declarations (8 instances)

GTK3 renders box-shadow entirely on CPU. Multi-line shadow stacks with alpha() compositing were the primary CPU driver.

Removed from window#waybar
/* REMOVED — 5-value box-shadow stack */
box-shadow:
    0 6px 20px alpha(@crust, 0.6),
    0 0 30px alpha(@blue, 0.12),
    0 0 60px alpha(@mauve, 0.05),
    inset 0 1px 0 alpha(@surface2, 0.3);
Removed from tooltip
/* REMOVED */
box-shadow: 0 4px 12px alpha(@crust, 0.5);
Removed from #custom-power:hover
/* REMOVED */
box-shadow: 0 0 15px alpha(@red, 0.4);
Removed from @keyframes glow-pulse (3 frames)
/* REMOVED — replaced with opacity fallback */
0%   { box-shadow: 0 0 5px alpha(@blue, 0.3); }
50%  { box-shadow: 0 0 15px alpha(@blue, 0.5); }
100% { box-shadow: 0 0 5px alpha(@blue, 0.3); }
Removed from @keyframes border-glow-cycle (4 frames)
/* REMOVED — retained border-color only */
0%   { border-color: ...; box-shadow: 0 0 8px alpha(@blue, 0.3); }
33%  { border-color: ...; box-shadow: 0 0 8px alpha(@mauve, 0.3); }
66%  { border-color: ...; box-shadow: 0 0 8px alpha(@teal, 0.3); }
100% { border-color: ...; box-shadow: 0 0 8px alpha(@blue, 0.3); }

4.2. 2. Disabled Infinite CSS Animations (7 → 0 always-on)

Infinite animations force GTK to repaint every frame. Each repaint recalculates all box-shadow and alpha() properties.

Selector Animation Action

#workspaces button.active

glow-pulse 2s ease infinite

Commented out

#custom-arch

text-flicker 4s linear infinite

Commented out

#clock

subtle-breathe 3s ease-in-out infinite

Commented out

#custom-power

border-glow-cycle 6s linear infinite

Removed

#network:not(.disconnected)

subtle-breathe 2s ease-in-out infinite

Commented out
Table 1. Retained (conditional — only fire on state change, not continuously)
Selector Animation Rationale

#workspaces button.urgent

pulse 1s ease infinite

Only fires when a workspace is urgent (rare)

#temperature.critical

pulse 0.5s ease infinite

Only fires at critical temp (emergency indicator)

#battery.critical:not(.charging)

pulse 0.5s ease infinite

Only fires at critical battery (emergency indicator)

4.3. 3. Disabled transition: all (4 instances)

transition: all tells GTK to interpolate every CSS property on state change. With modules updating every 2-5 seconds, this triggers constant transition computation.

Selector Line

#workspaces button

96

#cpu, #memory, #temperature, …​ (grouped modules)

302

#custom-arch

495

#custom-power

519

4.4. 4. Restored custom/media Module

The media module (playerctl -F) was temporarily removed during investigation to test if playerctl follow-mode caused the CPU spike. It did not. Restored to modules-center.

5. Visual Impact

Element Change

Window shadow

No visible shadow beneath waybar (was subtle glass effect)

Tooltip shadow

No visible shadow on tooltips

Workspace glow

Active workspace no longer has animated box-shadow glow

Arch logo

No longer flickers (Mr. Robot effect removed)

Clock

No longer breathes (subtle opacity oscillation removed)

Power button

No longer cycles border colors

Network icon

No longer pulses when connected

Hover transitions

Instant state change instead of 0.2-0.3s ease

The Catppuccin color scheme, alpha() backgrounds, border accents, and layout are fully preserved. The change removes visual effects only — no module behavior is affected.

6. Verification

Table 2. Before and after comparison
Metric Before After

waybar CPU usage

50-96%

0.0%

CPU package temp

86°C

56°C

ACPI temp

81°C

54°C

CPU frequency

800 MHz (throttled)

Normal scaling

Fan noise

Max RPM

Baseline (silent)

 
# Verify waybar CPU usage
top -b -n1 | awk '/waybar/ {print $1, $9, $10, $12}'

# Verify thermal readings
paste <(cat /sys/class/thermal/thermal_zone*/type) \
      <(awk '{printf "%.1f°C\n", $1/1000}' /sys/class/thermal/thermal_zone*/temp)

# Verify no CSS parse errors
waybar -l debug 2>&1 | grep -i error

7. Deployment

Changes applied directly to dotfiles on modestus-razer:

# Files modified
~/.config/waybar/style.css    # box-shadow removed, animations disabled, transitions disabled
~/.config/waybar/config        # custom/media temporarily removed then restored
# Restart waybar to apply
kill $(pgrep -x waybar) 2>/dev/null && waybar &disown 2>/dev/null
If waybar config is managed via dots-quantum / GNU Stow, commit and stow after verifying changes.

8. Rollback

# Revert via git (waybar config is in dots-quantum or similar)
git -C ~/.config/waybar checkout style.css config

# Or restore from git history
git -C ~/.config/waybar log --oneline -5
git -C ~/.config/waybar checkout <commit-hash> -- style.css config

# Restart waybar
kill $(pgrep -x waybar) 2>/dev/null && waybar &disown 2>/dev/null
Reverting will reintroduce the box-shadow + animation CPU rendering loop. Only revert if you have also addressed the GTK3 performance issue (e.g., by switching to a GPU-accelerated renderer or replacing box-shadow with border effects).

9. Future Considerations

9.1. Safe Visual Alternatives

Removed Effect Safe Replacement Why

box-shadow depth

border with alpha() colors

Borders are GPU-accelerated in GTK3

box-shadow glow

border-bottom: 2px solid alpha(@blue, 0.5)

Single-edge accent, zero CPU cost

transition: all

transition: background 0.2s ease (specific property)

Only interpolates one property, not all

Infinite animation

Remove, or use conditional selectors only (.urgent, .critical)

Conditional animations only fire on state change

9.2. Performance Testing Procedure

Before adding visual effects to waybar CSS:

# 1. Apply CSS change
# 2. Restart waybar
kill $(pgrep -x waybar) 2>/dev/null && waybar &disown 2>/dev/null

# 3. Wait 30 seconds for startup to settle
sleep 30

# 4. Check CPU — must be <2%
top -b -n1 | awk '/waybar/ {print "CPU:", $9"%"}'

# 5. If >2%, the CSS change is too expensive — revert

10. Related

11. Changelog

Date Author Change

2026-04-04

Evan Rosado

Initial CR — removed box-shadow, disabled animations and transitions, restored media module