openvibe-shared 2.20.4: ring icons without CSS transforms inside the SVG (icons missing while scrolling on phones) (#49)

OP OpenVibers committed 10 Oct 2026 · tag v2.20. · 0 files, +0 −0

Owner report (2026-10-10, phone screenshot of the openvibe.network tools section): icons go missing, especially while scrolling. The Pastes card showed its ring and comet but no glyph. The first chip of each row (YouTube Downloader, Merge PDF, Whois, Fancy Text, Logo Maker) showed no icon at all. Those chips sit in a vertical line under a scrolling thumb.

**Cause (as far as a desktop can tell).** It doesn't reproduce in headless Chrome at the same size (480 px at 3×), with forced dark mode or with simulated left-edge touch swipes: software raster paints everything. What failed on the phone is exactly what the icon CSS moved with CSS transforms inside the SVG:
- the glyph's `transform-box: view-box` + `transform-origin` + transform transition (started by a touch's sticky `:hover`);
- the comet's rotated circle;
- the progress circle's rotation;
- pulse's scale.

This file already documents one browser bug from that pipeline (a styled origin pivoting every solid glyph off-centre).

**Change (2.20.4).** No CSS transform touches an element inside the SVG any more:
- The comet is a dash moving round the ring (`stroke-dashoffset`, dash + gap = one circumference, so the loop is seamless).
- The progress arc is a `<path>` that starts at twelve o'clock (`applyProgress` is unchanged; the length is the same).
- The glyph keeps only its stroke/fill transitions, and the hover lift scales the whole `<svg>` element by 1.06.
- Pulse animates opacity only.
- Hover effects sit under `@media (hover: hover)`: a thumb scrolling over a link starts nothing.

**Same look.** Old and new rendered side by side at rest, with progress 0.4, busy, busy + progress, pulse and 22 px are the same, including the comet's position at the same moment.

Tests: suite 56/58 with 1 skipped. `analytics-retention` and `config` failed in the parallel run (a native crash under load) and both pass alone. `showcase.css` regenerated (`scripts/build-styles.js`).

This commit has no diff to show.