[Bug]: animations: "disabled" finishes scroll-driven animations in screenshots

Abierto
  • ¿Algo no está bien?
#43,986 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
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
playwright, typescript
Área
testing

Línea de trabajo

Start by reading inPagePrepareForScreenshots, the screenshot preparation entry point named in the issue, and inspect how it handles animations with finite end times. Reproduce the behavior with the supplied Playwright test using a ScrollTimeline or ViewTimeline. Done means screenshot preparation leaves scroll-driven animations at their current progress while preserving the existing behavior for time-based animations.

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

Descripción

Version

1.65.0

Steps to reproduce
import { test } from "@playwright/test";

test("scroll-driven animation", async ({ page, browserName }) => {
  await page.setContent(`
    <style>
      @keyframes show { from { opacity: 0 } to { opacity: 1 } }
      .scroller { overflow-x: auto; width: 200px; scroll-timeline: --strip x; }
      .content { width: 400px; height: 20px; }
      .indicator {
        width: 50px; height: 50px; background: red;
        animation: show linear both; animation-timeline: --strip;
      }
      body { timeline-scope: --strip; }
    </style>
    <div class="scroller"><div class="content"></div></div>
    <div class="indicator"></div>
  `);
  // The scroller is at its start, so the indicator is transparent.
  await page.screenshot({ path: `${browserName}.png`, animations: "disabled" });
});
Expected behavior

The indicator stays transparent, because the scroll-driven animation is at 0% progress. animations: "disabled" is about time-based animations, and a scroll-driven animation has no time to finish.

Actual behavior

The indicator is red in the screenshot, in both Firefox 159 and Chromium 158. The screenshot preparation calls animation.finish() on every animation with a finite endTime, including animations whose timeline is a ScrollTimeline or ViewTimeline, and both browsers move them to their end.

In our case, the scroll buttons of tab strips and carousels use scroll-driven animations, so screenshots drew them in the wrong state: Firefox showed them on strips that don't scroll, and Chromium hid them on strips that do. In Firefox, the finished state also stays after the screenshot, so later screenshots of the same page keep it.

Additional context

Skipping animations whose timeline isn't a DocumentTimeline in inPagePrepareForScreenshots would fix it:

if (!(animation.timeline instanceof DocumentTimeline)) continue;

We work around it before each screenshot by adding important rules with the current values of each scroll-driven animation and setting its playbackRate to 0, which the preparation skips, then restoring both afterward: https://github.com/ariakit/ariakit/pull/8331

Environment

macOS 27, Node.js 26.13.0, @playwright/test 1.65.0 (Chromium 158.0.8127.18, Firefox 159.0). Also seen on Ubuntu in GitHub Actions.

Lenguaje dominante
TypeScript
Estrellas
99.1k
Forks
6.8k
Merge medio
17 h 6 min
PR fusionados (30 d)
306

Preparar el entorno

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 microsoft/playwright

Todos los issues de microsoft/playwright

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.