github ReikanYsora/Helios v1.8.3-beta.21

pre-release6 hours ago

Dashboard curve ghost on day-to-day swap

Root cause

.dash-cf-cum-chart-curves carried a single symmetric transition: 1100 ms that ran in BOTH directions: the grow to scaleY(1) when a card gained .dash-cf-card-front, AND the collapse to scaleY(0) when it lost it. The CoverFlow card slide itself completes in 420 ms, so the leaving card's curves were still mid-collapse at scaleY ~0.6 for another ~680 ms after the card had already parked at its side position. That mid-height curve sat on top of the new front card's grow as a visible ghost. Rapid swipes compounded it because every in-flight collapse was still mid-way when the next swap kicked another one.

Fix

Asymmetric transition declared on two rules:

  • Base .dash-cf-cum-chart-curvestransition: transform 350 ms (fast collapse, eased in / out).
  • .dash-cf-card-front .dash-cf-cum-chart-curvestransition: transform 1100 ms (slow grow, eye-pleasing cubic-bezier 0.22 / 1 / 0.36 / 1).

CSS resolves the transition off the NEW computed style, so removing the front class falls back to the base 350 ms and the leaving card's curves are gone (scaleY(0)) before the 420 ms card slide settles. The new front keeps the same 1100 ms slow grow it had before.

Closes #192.

Beta channel. Install via HACS (enable "Show beta versions" on the Helios repo) or copy helios.js from this release directly into /config/www/community/Helios/.

Don't miss a new Helios release

NewReleases is sending notifications on new releases.