I'm using puppeteer with node and express on Ubuntu.

I basically have an endpoint that, when I call it on a browser, I return a screenshot from puppeteer.

The weird thing though is that every time I do that, the page on chrome flashes (I'm not running headless because I want to see what's happening).

Here's a video of what's happening:

https://youtu.be/FlgROI85y2E

This causes some weird issues where, on some websites where there are menus or popups that close when you click outside, when you take a screenshot, that popup or menu disappears.

Here's another example with the google about page that illustrates that:

https://youtu.be/tXqyCO8oAHg

Here's what my endpoint that gets the screenshot looks like currently:

app.get("/ss/:id/*", async (req, res) => {
  const { id } = req.params;
  const page = await getPage(id);

  const { resolution } = req.cookies;

  let [width, height] = (resolution as string)
    .split("x")
    .map((o) => parseFloat(o));

  width = Math.max(width, 1) - 4; // for netscape;
  height = Math.max(height, 1) - 4; // for nestcape;

  const ss = await page.screenshot({
    quality: 100,
    encoding: "binary",
    type: "jpeg",
    clip: { x: 0, y: 0, width, height },
  });

  res.type("jpg");
  res.send(ss);
});

I have tried to use PNG instead of jpeg, I have also tried without the clip. With and without setting the viewport.

I don't understand why this happens.

Has anyone seen this behavior before and knows how to fix it?

Thanks!