collapse) #14

New issue

Closed

opened 2026-03-02 05:16:32 +03:00 by kerem · 1 comment

kerem commented

2026-03-02 05:16:32 +03:00

Owner

Originally created by @jusolo on GitHub (Feb 17, 2026).
Original GitHub issue: https://github.com/hiaaryan/sileo/issues/17

Originally assigned to: @hiaaryan on GitHub.

Using sileo@0.1.1, toast collapse can emit SVG errors in console:

Error: attribute height: A negative value is not valid.

This happens after hover expand/collapse cycles (dynamic-island behavior), especially when moving the cursor in/out quickly.

Observed behavior:

UI mostly keeps working, but console gets flooded with errors.
Error appears at the end of collapse animation.
Reproducible with toasts that have description (expandable content).
Likely cause:

Body rect animates with spring to height: 0.
Spring overshoot occasionally generates tiny negative values (e.g. -0.07px).
SVG cannot be negative.
Current local workaround:

Change collapsed target from 0 to 0.5.
Use spring on expand, but tween/easeOut on collapse.
Suggested fix upstream:

Clamp animated height to >= 0 before rendering.
Or avoid spring overshoot on collapse.
Keep spring for expansion only.
Minimal repro:

Render with default options.
Trigger toast with description.
Hover to expand, then move cursor out repeatedly.
Check console for negative errors.

sileo-negative-rect-height-fix.md

Originally created by @jusolo on GitHub (Feb 17, 2026). Original GitHub issue: https://github.com/hiaaryan/sileo/issues/17 Originally assigned to: @hiaaryan on GitHub. Using sileo@0.1.1, toast collapse can emit SVG errors in console: Error: <rect> attribute height: A negative value is not valid. This happens after hover expand/collapse cycles (dynamic-island behavior), especially when moving the cursor in/out quickly. Observed behavior: UI mostly keeps working, but console gets flooded with errors. Error appears at the end of collapse animation. Reproducible with toasts that have description (expandable content). Likely cause: Body rect animates with spring to height: 0. Spring overshoot occasionally generates tiny negative values (e.g. [-0.07px](app://-/index.html#)). SVG <rect height> cannot be negative. Current local workaround: Change collapsed target from 0 to 0.5. Use spring on expand, but tween/easeOut on collapse. Suggested fix upstream: Clamp animated height to >= 0 before rendering. Or avoid spring overshoot on collapse. Keep spring for expansion only. Minimal repro: Render <Toaster /> with default options. Trigger toast with description. Hover to expand, then move cursor out repeatedly. Check console for negative <rect height> errors. [sileo-negative-rect-height-fix.md](https://github.com/user-attachments/files/25354123/sileo-negative-rect-height-fix.md)