Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Shadow-root and pseudo-element CSS animations land about a frame off, differently each load

Abierto
  • ¿Algo no está bien?
#4,555 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend, web-dev

Línea de trabajo

Start in packages/core/src/runtime/adapters/waapi.ts, focusing on ensureBaseline and how animation currentTime is captured. Reproduce the issue in headless Chrome with the supplied shadow-root and pseudo-element page, then call window.__player.seek(2) and inspect both computed transforms. Done means both consistently report the expected translateX(50px) across repeated loads.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

What happens

A CSS animation inside a shadow root, or on a ::before/::after pseudo-element, lands at a slightly different frame each time the page loads. Seeking to the same time gives a position that varies by about one frame between runs (0.4 to 1.25 px on a 4 s, 100 px slide), in Studio's preview and in renders.

The CSS adapter only drives an element's own animations, so these are left to the WAAPI adapter. The WAAPI adapter records a baseline for each animation the first time it sees it, including the animation's own currentTime at that moment (ensureBaseline in packages/core/src/runtime/adapters/waapi.ts). For a CSS animation that has been running since the page loaded, that value is however much wall-clock time passed before discover, so every later seek is offset by it.

Repro

Headless Chrome, the runtime built from main, window.__player.seek(2), then read the computed transform. Load the page several times.

<style>
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(100px) } }
#el::before { content: "x"; display: inline-block; animation: slide 4s linear 1 both; }
</style>
<div data-composition-id="main" data-root="true" data-start="0" data-duration="10" data-width="640" data-height="360">
  <div id="el" class="clip" data-start="0" data-duration="10">el</div>
  <div id="host" class="clip" data-start="0" data-duration="10"></div>
</div>
<script>
  const sr = document.getElementById("host").attachShadow({ mode: "open" });
  sr.innerHTML = '<style>@keyframes slide { from { transform: translateX(0) } to { transform: translateX(100px) } } #in { animation: slide 4s linear 1 both; }</style><div id="in">in</div>';
</script>
<!-- then the runtime script -->

Read after seek(2):

  • getComputedStyle(document.getElementById("el"), "::before").transform
  • getComputedStyle(document.getElementById("host").shadowRoot.getElementById("in")).transform

Expected: translateX(50px) on every load.
Observed: about 50.4 to 51.25 px, different from run to run.

Notes

  • Animations on an element in the light DOM are driven by the CSS adapter from the clip's data-start and are exact.
  • Found while testing #4554. It is not caused by it; main behaves the same.
Lenguaje dominante
TypeScript
Estrellas
54.1k
Forks
4.9k
Merge medio
7 h 19 min
PR fusionados (30 d)
746

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de heygen-com/hyperframes

Todos los issues de heygen-com/hyperframes

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.