Why is my Puppeteer screenshot blurry for the main Flourish chart but sharp for other webpage elements?

I'm using Puppeteer in a Node.js script to capture high-quality screenshots of a Flourish Studio bar chart race. However, while most of the webpage appears crisp and clear, the main bar chart race remains blurry in the screenshot.

Here's my script:

const puppeteer = require('puppeteer');
const readline = require('readline');
const fs = require('fs');
const path = require('path');

(async () => {
    const browser = await puppeteer.launch({ headless: false, devtools: true });
    const page = await browser.newPage();

    // Set a high resolution and scale factor
    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 3 });

    await page.goto('https://public.flourish.studio/visualisation/19321054/', { waitUntil: 'networkidle2' });

    console.log('📢 Press F4 in PowerShell to take a high-quality screenshot.');

    readline.emitKeypressEvents(process.stdin);
    process.stdin.setRawMode(true);

    process.stdin.on('keypress', async (str, key) => {
        if (key.name === 'f4') {
            console.log('📸 F4 pressed! Capturing high-quality screenshot...');

            const outputFolder = 'E:/Desktop/ffgfgfgfgfg/New folder (3)/';
            if (!fs.existsSync(outputFolder)) {
                fs.mkdirSync(outputFolder, { recursive: true });
            }

            const timestamp = Date.now();
            const screenshotPath = path.join(outputFolder, `screenshot_${timestamp}.png`);

            // Capture a high-quality screenshot
            await page.screenshot({
                path: screenshotPath,
                fullPage: true,
                type: 'png',
                omitBackground: true
            });

            console.log(`✅ High-quality screenshot saved at: ${screenshotPath}`);
        }
    });
})();

Problem:

• The main chart animation looks blurry in the screenshot.
• The rest of the page (UI, text, buttons, etc.) is sharp and high-quality.
• I already set deviceScaleFactor: 3, which should improve quality.

Possible Causes & Questions:

• Could the Flourish chart inside an iframe be affecting quality?
• Do I need to increase rendering quality inside the iframe before taking the screenshot?
• Is there a way to force higher DPI or SVG rendering inside Puppeteer?

Any suggestions on how to fix this and capture a sharp, high-quality screenshot of the bar chart race?

I got a pretty sharp screenshot by selecting the body instead of using fullPage on puppeteer@24.4.0 macOS

const elem = await page.waitForSelector('body')

await elem.screenshot({
  type: 'png',
  path: screenshotPath,
  omitBackground: true
})

I tried with fullPage and it was sharp as well.