Hovering a tile card repaints saturated text on *other* cards (Chromium only)

[Alfamonk]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The problem

On a dashboard, moving the mouse across a tile card makes saturated red and orange text
repaint noticeably lighter, reverting as soon as the cursor moves on. The text affected is not
only on the hovered card - text on other cards elsewhere on the page changes too.

Two details that make it hard to spot in a screenshot:

• It requires mouse MOVEMENT. Hovering and holding still shows nothing, so it cannot be captured
  in a static screenshot.
• Only saturated colours show it. Greens, blues and near-whites do not visibly change.

Environment

Home Assistant	2026.8.3
V8	15.1.206.23
Affected	Chrome 151.0.7922.174 (64-bit, Official Build), Opera, Android WebView
Not affected	Firefox
OS	Windows 11 24H2, build 26100.9168
Custom cards / resources	none - all Lovelace resources unregistered for the test
Custom theme	one variable, as above

What has been ruled out, by test rather than by inspection

• Not the user's dashboards or themes. Reproduces on a throwaway dashboard of three stock cards.
• Not custom cards or HACS resources. All 20 registered Lovelace resources were
  unregistered; it still reproduces.
• Not GPU acceleration. Reproduces with hardware acceleration disabled in Chrome.
• Not a stale client. Survives an HA restart, a hard refresh and a full browser restart.
• Not --ha-ripple-hover-opacity. Setting it to 0 was verified applied and had no effect.
• Not a subpixel/grayscale antialiasing switch. With the text forced into a non-opaque layer it
  looks identical at rest yet stops flickering; and a device with no subpixel AA at all still
  shows the effect.

The one property every workaround shares

Three things stop it, and only these three:

• transform: translateZ(0) on the card
• opacity: 0.999 on the card
• ha-ripple { display: none } plus ha-card, ha-card * { transition: none } plus a
  tile-icon opacity override - all together; no subset works

All three force the element into its own compositing layer. Nothing that leaves the element in
the shared layer has ever worked. That points at paint invalidation / layer handling around the
hover state rather than at any CSS colour rule - of ~114k CSS rules on the original page, only six
hover rules could reach the affected cards and none of them sets a text colour.

Note

A hand-built plain HTML page reproducing the same colours and an equivalent opacity 0 -> .08
15 ms fade did not flicker - so something about the real frontend's structure is needed. That
test was a replica rather than the real component, so treat it as weak evidence.

---

Search performed before drafting (2026-08-27)

home-assistant/frontend, issues, including closed:

query	hits
hover text color flicker	0
hover repaint text	0
tile card hover flicker	0
ripple hover text color change	0
subpixel antialiasing text	0
will-change compositing	0

Nearest relatives, both different symptoms: #25428 (menu items stay highlighted after hover,
Chromium-only, Firefox fine) and #27507 (hover ripple frozen after navigation, Safari, closed
stale by a bot).

⚠ A Chromium bug exists titled "css animation when hovering element, changes color saturation on
the whole page on chrome 22" (Monorail 153192). The title matches the symptom closely, but its
contents could not be retrieved - the old tracker is archived and served an empty page - and it
dates from ~2012. Do not cite it as support. It is a lead to pull, nothing more.

Describe the behavior you expected

The repaint/flashing shouldn't happen.

Steps to reproduce the issue

Minimal reproduction

1. Create a theme containing exactly one variable:

   flicker-min:
     primary-text-color: "#FF0000"

2. Create a dashboard with one view using theme: flicker-min and three stock cards - a markdown
   card, a grid of tile cards, and an entities card.

3. Open it in Chrome and move the mouse across the tile cards.

The red text repaints lighter while the cursor is moving, on the tile cards and on the entities
card below them.

What version of Home Assistant Core has the issue?

2026.8.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Chrome 151.0.7922.174

Which operating system are you using to run this browser?

No response

State of relevant entities

Problem-relevant frontend configuration

JavaScript errors shown in your browser console/inspector

Additional information

No response