runv-server

commit 921c4a438eebd1b6d4928088310bcb32881e9852
parent 6ae81da75a5ce258ce5feccdd329bcec646c1a33
Author: Pablo Murad <pablo@pablomurad.com>
Date:   Sat, 21 Mar 2026 18:53:42 -0300

starfield fix

Diffstat:
M
site/public/assets/app.js
 | 
13
+++++++++----
M
site/public/assets/style.css
 | 
19
+++++++++++--------

2 files changed, 20 insertions(+), 12 deletions(-)
diff --git a/site/public/assets/app.js b/site/public/assets/app.js
@@ -1,7 +1,7 @@
 /**
  * Landing runv.club — carrega members.json (só dados públicos) e coloca
  * pontos clicáveis (links) fora da coluna de texto; brilho ligado à data since.
- * Pontos com position:fixed no viewport (filhos de body); zona central sintética como .wrap.
+ * Pontos dentro de #starfield (fixed fullscreen); cada um position:absolute — sem transform no CSS.
  * Não recalculam ao scroll — só em resize.
  * Array vazio: sem estrelas até build_directory.py gerar o JSON a partir de users.json.
  */
@@ -131,13 +131,16 @@ function isStarfieldMobileViewport() {
   return window.matchMedia("(max-width: 768px)").matches;
 }
 
-function renderStarLinks(members) {
+function renderStarLinks(container, members) {
   document.querySelectorAll("a.star-member").forEach((el) => el.remove());
+  if (container) container.replaceChildren();
 
   if (isStarfieldMobileViewport()) {
     return;
   }
 
+  if (!container) return;
+
   const w = window.innerWidth;
   const h = window.innerHeight;
   if (w < 32 || h < 32) return;
@@ -161,11 +164,13 @@ function renderStarLinks(members) {
     const scale = 0.78 + bright * 0.42;
     a.style.setProperty("--star-scale", String(scale));
 
-    document.body.appendChild(a);
+    container.appendChild(a);
   }
 }
 
 async function main() {
+  const starRoot = document.getElementById("starfield");
+
   let members = [];
 
   try {
@@ -181,7 +186,7 @@ async function main() {
   const scheduleStars = () => {
     cancelAnimationFrame(starRaf);
     starRaf = requestAnimationFrame(() => {
-      renderStarLinks(members);
+      renderStarLinks(starRoot, members);
     });
   };
 
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
@@ -70,6 +70,8 @@ body {
   z-index: 0;
   pointer-events: none;
   overflow: visible;
+  transform: none;
+  isolation: isolate;
 }
 
 /* Membros como pontos: só em ecrãs largos (em mobile o texto ocupa o viewport). */
@@ -79,33 +81,34 @@ body {
   }
 }
 
+/* Sem transform nas bolinhas: fixed + transform falha em alguns WebKit ao rolar. */
 .star-member {
   --star-scale: 1;
-  position: fixed;
+  position: absolute;
   z-index: 0;
-  width: 10px;
-  height: 10px;
-  margin: -5px 0 0 -5px;
+  width: calc(10px * var(--star-scale));
+  height: calc(10px * var(--star-scale));
+  margin: calc(-5px * var(--star-scale)) 0 0 calc(-5px * var(--star-scale));
   padding: 0;
   border: none;
   border-radius: 50%;
   pointer-events: auto;
   cursor: pointer;
-  transform: scale(var(--star-scale));
-  transform-origin: center;
   text-indent: -9999px;
   overflow: hidden;
   white-space: nowrap;
   background: var(--accent);
   opacity: 0.72;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity 0.15s ease, width 0.15s ease, height 0.15s ease, margin 0.15s ease;
 }
 
 .star-member:hover,
 .star-member:focus-visible {
   opacity: 1;
   outline: none;
-  transform: scale(calc(var(--star-scale) * 1.1));
+  width: calc(11px * var(--star-scale));
+  height: calc(11px * var(--star-scale));
+  margin: calc(-5.5px * var(--star-scale)) 0 0 calc(-5.5px * var(--star-scale));
 }
 
 .star-member:focus-visible {