Navigate page till rendering last frame not networkidel

I’m taking screenshot for large html 6200*6000 , but i got large white space in the output image every time i try to take the image.

I made so many tests, and found out that there’re frames rendered after the load event, so i don’t get it in the captured image.

The red line showing the load event and there’s frames after that line.

I tried to read all the documentation for the package but i’m a civil engineer and don’t know lots in programming, i tried my best and couldn’t find a solution for it.

There’s 4 options in page.goto and they don’t solve the problem, here’s the url for the documentation . https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options

Here’s my code

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('D:\Image_2.HTML', {waitUntil: 'load'});
  function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log(page.frames())
  await page.screenshot({path: 'example.png',fullPage : true});

  await browser.close();
})();

Help please.

[vsemozhetbyt]

@OmarAbdElNasser You can compare the upper right corner in both images: it seems like the left map part is copied above the right part in the second (headfull) image:

[vsemozhetbyt]

FWIW, I do have white spot with the code:

Big Image:

If I use await puppeteer.launch({ headless: false }); I have no white spots, but the image seems distorted:

Big image:

So it seems the issue is not the load/rendering race, but the screenshot getting/saving, I am not sure how to fix this, if I am right.