vendor sync: ring icons — fix solid glyphs rendering off-centre (transform-origin pivot bug)

OP OpenVibers committed 21 Sept 2026 · 6fe875e021 · 1 file, +6 −1

Mirrors OpenVibers/OpenVibe.Network@71be248. The solid-glyph centering transform lived
on the same <g class="ovi-glyph"> element that carries transform-box/transform-origin
for the hover-scale animation; a non-default transform-origin pivoted the glyph around
(12,12) instead of placing it in place, throwing every solid glyph ~27% of the ring
diameter off-centre. Note: openvibe.live's navbar loads ov-icons.js live from
https://openvibe.network/shared/ov-icons.js, not from this vendored copy — the fix that
actually matters for site visitors is the Network deploy.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/vendor/openvibe-shared/ov-icons.js b/vendor/openvibe-shared/ov-icons.js
iindex 98c788a7..2794a953 100644
---- a/vendor/openvibe-shared/ov-icons.js
++++ b/vendor/openvibe-shared/ov-icons.js
@@@ -173,7 +173,12 @@
          if (!solid) return forSprite ? def.glyph : `<g class="ovi-glyph">${def.glyph}</g>`;
          const [w, d] = solid; const sc = 18 / 512; const tx = (24 - w * sc) / 2, ty = 3;
          const paint = forSprite ? ' fill="currentColor" stroke="none" style="fill:var(--ovi-glyph,var(--text-primary,#e6edf7))"' : '';
--        return `<g class="ovi-glyph ovi-glyph--solid"${paint} transform="translate(${tx.toFixed(2)} ${ty}) scale(${sc.toFixed(5)})"><path d="${d}"/></g>`;
++        // The position/scale transform must live on a plain (unclassed) <g>, not on the .ovi-glyph
++        // element itself: that class sets transform-box/transform-origin for the hover-scale
++        // animation, and browsers resolve a "transform" *attribute* through the same CSS transform
++        // pipeline — so pairing it with a non-default transform-origin pivots the glyph around
++        // (12,12) instead of applying it in place, throwing every solid glyph off-centre.
++        return `<g class="ovi-glyph ovi-glyph--solid"${paint}><g transform="translate(${tx.toFixed(2)} ${ty}) scale(${sc.toFixed(5)})"><path d="${d}"/></g></g>`;
      }
  
      function resolve(name) {