'CSS transitions not working when screen-recording using Puppeteer

I have a page where lots of large images are being resized and moved around and I am using CSS transitions for all of these actions.

When I run the page on the browser everything is working fine.

The transitions are sometimes a bit bumpy but it's understandable given the size of the images and the large quantity so I can live with that.

However, I'm now trying to use puppeteer (headless) combined with the puppeteer-screen-recorder module and when I look at the resulting video, there are no transitions.

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const defaultViewport = {
  width: 1440,
  height: 764
}

;(() => {

  const browser = await puppeteer.launch({ defaultViewport })
  const page = await browser.newPage()
  const recorder = new PuppeteerScreenRecorder(page, {
    videoFrame: defaultViewport,
    aspectRatio: '360:191'
  })

  async function stop() {
    await recorder.stop()
    await browser.close()
    process.exit(1) 
  }

  await page.setDefaultNavigationTimeout(0)

  await page.exposeFunction('onAnimationsDone', async () => {
    stop()
  })

  await page.exposeFunction('onAnimationsStarted', () => {
    recorder.start('./client/db/test.mp4')
  })

  await page.goto('http://localhost:8000/')

})()

Is this an unavoidable limitation of using headless puppeteer or am I doing something wrong ?

javascriptcssnode.jspuppeteerpuppeteer-screen-recorder


Solution 1:[1]

Difficult to say, at first glance this might be coming from some kind of reduce motion being applied by puppeteer when running headless.

Attribute Syntax
reduce Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
no-preference Indicates that the user has made no preference known to the system.

You could make sure chromium is running no-preference:

await page.emulateMediaFeatures([{ 
    name: 'prefers-reduced-motion', 
    value: 'no-preference' 
},]);

await page.evaluate(
    () => matchMedia('(prefers-reduced-motion: no-preference)').matches
);

Are you sure this isn't related to the fps default setting of 25 frames per seconds ? from the puppeteer-screen-recorder package.

fps: Numeric value which denotes no.of Frames per second in which the video should be recorded. default value is 25.

Solution 2:[2]

Some things to try...

1. Try running puppeteer NOT headless

    const browser = await puppeteer.launch({
        headless: false,
        args: [
            '--hide-scrollbars',
            '--mute-audio'
        ]
    });

Any difference? If it doesn't work in headless, first thing to do is run non-Headless and see if it LOOKS okay to you. If it looks okay to you and isn't being captured in the video...then it is an issue with this library. If it doesn't look okay to you, then it is a browser issue with the browser that puppeteer is using. Change browser or browser config args.

2. Try Chrome instead of Chromium

There are media limitations in Chromium (what puppeteer uses by default). If you have normal Google Chrome installed on your computer you can tell puppeteer to use that instead. I've found this helped with capturing video embeds that didn't play in chromium.

const browser = await puppeteer.launch({
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        ....

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 amarinediary
Solution 2 mattpr

Related Questions