From e9a6eba30b5ec1b7cdd4aea816131e840d541353 Mon Sep 17 00:00:00 2001 From: jenkins Date: Mon, 24 Aug 2026 00:01:52 -0300 Subject: [PATCH] fix(hermes): stabilize chat canvas gradients --- dockerfiles/hermes-webui-brand.css | 11 ++++++++++- testing/tests/test_hermes_webui_brand.py | 6 +++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/dockerfiles/hermes-webui-brand.css b/dockerfiles/hermes-webui-brand.css index f73d4ab5..16ae423f 100644 --- a/dockerfiles/hermes-webui-brand.css +++ b/dockerfiles/hermes-webui-brand.css @@ -78,13 +78,22 @@ background-color: transparent; } -:root.dark .messages { +:root.dark .messages-shell { background-image: linear-gradient(var(--hermes-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hermes-grid) 1px, transparent 1px), radial-gradient(circle at 76% 22%, rgba(76, 164, 205, 0.055), transparent 30rem), radial-gradient(circle at 22% 78%, var(--hermes-violet-muted), transparent 35rem); background-size: 32px 32px, 32px 32px, auto, auto; + background-repeat: repeat, repeat, no-repeat, no-repeat; +} + +/* The transcript is an accelerated scroll surface. Painting gradients on it + produces stale compositor tiles on Chromium as the scroll offset changes, + which looks like a dark rectangle moving along the right edge. Keep the + scroll surface transparent and paint the texture on its stationary shell. */ +:root.dark .messages { + background-image: none; } :root.dark .rail { diff --git a/testing/tests/test_hermes_webui_brand.py b/testing/tests/test_hermes_webui_brand.py index 2467ea0e..fe0ab9be 100644 --- a/testing/tests/test_hermes_webui_brand.py +++ b/testing/tests/test_hermes_webui_brand.py @@ -359,8 +359,12 @@ def test_brand_css_is_accessible_dark_and_reduced_motion_aware() -> None: assert "--hermes-grid: rgba(72, 207, 204, 0.025)" in dark assert ".empty-logo .hermes-agent-portrait" in css assert "width: 112px" in css - assert ":root.dark .messages" in css + assert ":root.dark .messages-shell" in css assert "background-size: 32px 32px, 32px 32px, auto, auto" in css + assert "background-repeat: repeat, repeat, no-repeat, no-repeat" in css + messages = css.rsplit(":root.dark .messages {", 1)[1].split("}", 1)[0] + assert "background-image: none" in messages + assert "radial-gradient" not in messages assert ":root.dark .session-item.active" in css assert ":root.dark .suggestion:focus-visible" in css assert "@media (prefers-reduced-motion: reduce)" in css