window inner size not equal to viewport size #1183

0xtoorich · 2017-10-27T08:41:06Z

Tell us about your environment:

Puppeteer version: 0.13.0-alpha
Platform / OS version: macos high sierra 10.13
URLs (if applicable):

What steps will reproduce the problem?

Please include code that reproduces the issue.

// start.js

const puppeteer = require('puppeteer')

const run = async () => {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 250,
    args: [
      '--disable-infobars',
    ],
  });

  const page = await browser.newPage();

  await page.goto('https://www.google.com/');

  await page.waitFor(60000)
  await browser.close();
}

run()

node start.js

What is the expected result?

window inner size and viewport should be equal, all the default 800px x 600px

What happens instead?

window inner size is larger than the viewport size

The text was updated successfully, but these errors were encountered:

entrptaher · 2017-10-28T21:41:53Z

To add more salt into it, opening devtools will make the viewport lose the predefined size. For example,

zicongxie · 2017-10-29T02:08:10Z

It has a param can be reset the window viewports in launch method.

…

Sent from my iPhone

On 29 Oct 2017, at 5:41 AM, Abu Taher ***@***.***> wrote: To add more salt into it, opening devtools and closing it will make the viewport lose the predefined size. For example, — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

0xtoorich · 2017-10-29T05:40:10Z

@zicongxie await page.setViewport({ width: 600, height: 400 }) only change the viewport size, but the window size will not changed to 600px x 400px too.

0xtoorich · 2017-10-29T05:41:35Z

@entrptaher I noticed that too.

aslushnikov · 2017-10-31T18:29:13Z

@chanjsq what's your usecase? Why would you need to change the window size?

entrptaher · 2017-10-31T19:56:03Z

For me, say I will want to test responsiveness.

0xtoorich · 2017-11-01T00:33:22Z

@aslushnikov When setting the viewport size larger than the default window size, we also need to set the window size with the same value to see the whole page width, it's convenient if the window size can change with viewport size accordingly.

mike-aungsan · 2017-11-01T00:45:21Z

Have the same issue on Windows 8.

aslushnikov · 2017-11-01T04:49:59Z

@entrptaher isn't viewport enough for responsiveness?
@chanjsq so this is mostly for debugging purposes?

0xtoorich · 2017-11-01T05:50:12Z

@aslushnikov yes, smart can be better

z-vr · 2017-11-15T10:39:01Z

can i make the viewport equal to the size of the window by default, and adjustable while resizing? i don't want the viewport which is not equal to the window size :( +1 on this one

radekmie · 2017-12-01T21:11:42Z

I'm using this code:

await page.setViewport({height, width});

// Window frame - probably OS and WM dependent.
height += 85;

// Any tab.
const {targetInfos: [{targetId}]} = await browser._connection.send(
  'Target.getTargets'
);

// Tab window. 
const {windowId} = await browser._connection.send(
  'Browser.getWindowForTarget',
  {targetId}
);

// Resize.
await browser._connection.send('Browser.setWindowBounds', {
  bounds: {height, width},
  windowId
});

I think that Tab window + Resize parts could be part browser API such as:

browser.resize({height, width})

tnoetzel · 2017-12-13T20:14:46Z

Definitely also need this, fwiw.

ganfubin · 2018-01-15T03:24:40Z

this function is very necessar

leachimsumiri · 2018-02-06T13:13:22Z

+1

akylkb · 2018-02-06T21:24:39Z

https://peter.sh/experiments/chromium-command-line-switches/#window-size

const puppeteer = require('puppeteer')

const run = async () => {

    // Viewport && Window size
    const width = 400
    const height = 600

    const browser = await puppeteer.launch({
        headless: false,
        args: [
            `--window-size=${ width },${ height }`
        ],
        defaultViewport: {
            width,
            height
        }
    });

    const page = await browser.newPage();
    await page.goto('https://www.google.com/')

    // await browser.close()
}

run()

Mehuge · 2018-02-10T18:09:18Z

I am using the following to achieve the desired effect.

const chrome = { x: 0, y: 74 };   // comes from config in reality
args.push(`--window-size=${width+chrome.x},${height+chrome.y}`);
puppeteer.launch({ headless, sloMo, args });
// ...
page.setViewport({ width, height });

tomholub · 2018-02-16T12:16:22Z

Based on https://github.com/GoogleChrome/puppeteer/blob/v0.13.0/docs/api.md#pagefocusselector and @Mehuge asnwer

const chrome = { x: 0, y: 74 };   // comes from config in reality
args.push(`--window-size=${width+chrome.x},${height+chrome.y}`);
puppeteer.launch({ headless, sloMo, args });
// ...
page.setViewport({ width, height });

(correcting typo in setViewport above)

I-keep-trying · 2018-02-26T15:29:34Z

Thanks, guys!!! I combined @akylkb with @Mehuge and got the perfect solution!

And fwiw, for people who didn't understand why viewport size is important. It was stopping me dead in my tracks, because a common practice in many websites is to change the layout from pc / laptop to mobile based on viewport size, and the default size was causing it to go to the mobile layout, which did not have the login button available without an extra menu, involving two extra clicks. The entire DOM and navigation path can be completely different depending on how many different responsive designs the website designers have in place; they could have several, from smart watches to mobile, to ipads and tablets, touch screens and kiosks as well. The world includes much, much more than just laptops and pcs, and each and every layout will have a completely different DOM structure.

So, again, THANK YOU, @akylkb and @Mehuge, your solutions deserve a lot more attention imo!!

grantstephens · 2018-03-01T12:19:20Z

Think this is actually a bug when connecting over a websocket as I can't find a way to set the window size when on web socket. This means that some sites render incorrectly as they seem to look at the window size and not that set viewport, i.e:
Launch the browser
Connect to it via websocket
Set the viewport to be bigger than the window size of the websocket browser
Screenshot is based on window size.

I'm not 100% sure of this, but would seem to be the case and would appreciate anybody who could confirm.

PayteR · 2018-03-19T17:35:50Z

Hi, thx guys for solutions, but screen.width and screen.height are in headless: true always 800x600 and for headless: false is always resolution of actual screen. Any suggestions to solve this other than manually do it so in evaluate() method? Code:

await Page.evaluateOnNewDocument((screenWidth, screenHeight) => {
    screen.__defineGetter__('width', function () {
        return screenWidth;
    });
    screen.__defineGetter__('height', function () {
        return screenHeight;
    });
}, width, height);

* Workaround for puppeteer/puppeteer#1183 * Formatting. * Formatting.

winterli · 2018-04-10T06:27:31Z

This might be related issue,

When saving as PDF (have to use headless mode), the window size triggers the incorrect media query. For example, if page.setViewport(1200,960), then load below HTML page and save to PDF. Will expect the DIV has a gray background. But it actually shows a yellow background.

<body>
	<script>
		document.write("Window width: "+window.innerWidth);
	</script>
	<style>
		div{
			background: gray;
		}
		@media (max-width: 767px) {
			div{
				background: yellow;
			}
		}
	</style>
	<div>gray indicates window > 767px, yellow indicates window <=767px</div>
</body>

This patch: - teaches page.setViewpot() to accept `null` to disable viewport emulation. - allows passing `0` as deviceScaleFactor to use machine-defined deviceScaleFactor. References puppeteer#1183. Fixes puppeteer#2358.

Mehuge · 2018-04-13T16:43:42Z

I am now using @radekmie's solution, as well as the --window-size argument.

In my test environment, the browser size may be specified before the browser window is open, and may be altered afterwards. So in the case where it is specified before the browser window is open, I remember the size and use --window-size when launching the browser. If the test scripts later specify a new size, I then use the resize code provided by @radekmie.

junguchina · 2018-09-17T09:50:11Z

@DanielRuf Thanks, my version of puppeteer is the latest version(1.8.0).
It still has this problem.I use codeceptjs with puppeteer.
The viewport size of chromium is 800x600,but inner homepage size is 1920x1080.

fergardi · 2018-09-24T08:49:06Z

I'm facing the same issue as above.

DanielRuf · 2018-09-24T10:46:42Z

Mh weird, it seems this was not resolved as I am still getting the narrow / small viewport even if I resize. Is there some regression?

fergardi · 2018-09-24T11:59:02Z

I want to share my personal experience. This will be a long trip.

I'm using puppeteer@1.8.0 and Google Chrome V69.0.3497.100 in a Windows10 environment.

Let's say I am new to Headless Chrome, and I want to print a dashboard in PDF. I searched for a typical responsive template dashboard and found this one I will be using as an example, credits to the original author: https://demos.creative-tim.com/bs3/paper-dashboard/dashboard.html

Then I create a new fresh script to work with:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false}) // debug
  const page = await browser.newPage()
  await page.setViewport({width: 768, height: 1024, deviceScaleFactor: 2})
  await page.goto('https://demos.creative-tim.com/bs3/paper-dashboard/dashboard.html', {waitUntil: 'networkidle0'})
  await page.waitFor(1000)
  await page.click('button.close') // remove notification
  await page.click('a.navbar-brand') // click on page to close advertisement
  await page.emulateMedia('screen') // force screen CSS
  await page.waitFor(1000) // wait for every modal to dissapear
  await page.pdf({path: `${Date.now()}.pdf`, format: 'A4', printBackground: true})
  await browser.close()
})()

After that, I prove that in headful mode, and it gives me this result:

Firstly, why that blank space? Is that the difference between the default 800px width viewport minus my 768px viewport? I don't think so. However, this does not show in the final PDF, only in headful mode, but it stills bugs me a lot. In headless mode, it shows at follows:

Secondly, why the media CSS flex is not triggering as showed in the intial picture? There should be two columned layout, not the single one. As I inspect them, they show as classic '@media' queries. Maybe the 'screen' forced mode instead of 'print' is causing this? I do not know.

Thirdly, why my pixel resolution is not being respected? If, in headful mode, I show the DevTools and extract them from the page (which seems, by the way, to re-render the page to the expected behaviour), I can see the pixel resolution is not at all the one I setted of in the initial step.

In fact, I could even increase the pixel resolution to have no results on the output:

Ah, that seems the old 800x600 viewport issue we were talking about. So I started to test every solution in this post, with these results:

Force puppeteer to launch to a nulled defaultViewport? No changes either in headless or headful.
Force puppeteer to launch to a defaultViewport with exactly the same resolution as I wanted? No changes either in headless or headful.
Force puppeteer to launch to a defined --window-size arg commands? That seems indeed to change the headful result and fix the strange blank space, leaving me with my desired initial resolution (to test responsiveness, for example). That leads me to the next issue. If I'm visiting this website with 768px width, which effectively triggers the corresponding @media query, why in headful I see one result and in headless I see another different result?

Maybe the float is affecting the behaviour? But again, why am I not achieveing the exact same result being in headful or in headless, as this is the whole point? I do not know. That will be an entirely different issue.

paynecodes · 2019-04-09T13:03:15Z

Is there any way we can get this opened? It's still an issue, and @fergardi's comment describes the issue nicely.

cc @aslushnikov

samburgers · 2019-04-10T23:43:30Z

I was knocking my head over this for some time, until i realised (at least for my particular use case) is that this is all i needed to do to break out of the default 800 x 600 size:

const puppeteer = require("puppeteer");

(async () => {

  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  await page.emulateMedia("screen"); // <- optional but super useful

  await page.goto("http://localhost:3000", {
    waitUntil: "networkidle2"
  });

  await page.pdf({
    path: "filename.pdf",
    pageRanges: "1",
    width: 1600, // <- set width
    height: 1240, // <- set height
    printBackground: true
  });
})();

redochka · 2019-05-20T10:04:41Z

why is this issue closed, while the problem is still there?

shawnnaquin · 2019-06-06T23:39:03Z

tested, still an issue.

aslushnikov · 2019-06-07T00:57:42Z

Everybody: the reason this issue is closed is because you can actually disable viewport emulation with defaultViewport: null option.

Here's an example:

const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});
const page = await browser.newPage();
// ...

meeple142 · 2019-06-07T05:35:57Z

thanks for the tip @aslushnikov

KotieSmit · 2019-07-15T05:02:27Z

FWIW

My workaround was to add:

_beforeSuite() {
this.helpers.Puppeteer.resizeWindow(1200, 960)
}

This way the view port is always set the size I want. You can go a step further and read out the values from the config file.

https://codecept.io/helpers/Puppeteer#resizewindow

deqline · 2020-05-29T18:53:01Z

As of today @aslushnikov method still works for anyone having this problem.

const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});

destroyer22719 · 2020-07-20T00:26:38Z

Everybody: the reason this issue is closed is because you can actually disable viewport emulation with defaultViewport: null option.

Here's an example:
const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});
const page = await browser.newPage();
// ... 

THANK YOU SO MUCH YOU ARE AN ANGEL

jonwilliams-bluescape · 2020-11-14T14:59:54Z

having fought with this for a few days, none of the googled solutions worked for me.
Although some of what's been posted will result in the window size being set, the values won't be readable from window.outerWidth after a page navigation.

However...

function setWindowDimensions ({width, height}) {
  window.outerWidth = width;
  window.outerHeight = height;
}

(async () => {
  const dimensions = await page.evaluateOnNewDocument(setWindowDimensions, {width, height});
})();

Executing this before navigating to the target URL will allow a script on that page to properly read the window size.
Tested in both headless and non-headless mode (Chromium)

siva349 · 2021-10-08T06:22:49Z

Started working with puppeteer since few days, struggled with this problem. But this solution worked like a magic. Thanks @aslushnikov

const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});

f-g-s · 2021-10-18T11:42:53Z

I´m using Puppeteer and Jest and this jest-puppeteer.config.js works for me. :)

module.exports = {
    launch: {
        args: ['--start-maximized'], // get full screen browser window 
        defaultViewport: null, // get default (full size) viewport 
    },
}

danangponorogo · 2021-11-15T08:48:25Z

a little addition

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        ignoreHTTPSErrors: true,
        defaultViewport: null,
        args: [`--start-maximized`]
    });
    const page = await browser.newPage();
    await page.goto('https://domain.com');
    await browser.close();
})();

mystic-poet · 2022-01-08T07:47:23Z

#> this.helpers.Puppeteer.resizeWindow(1200, 960)

const browser = puppeteer.launch(

Started working with puppeteer since few days, struggled with this problem. But this solution worked like a magic. Thanks @aslushnikov
const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});

Where did you add these lines?

ganfubin · 2022-01-08T07:47:51Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

vigneshwaran-chandrasekaran · 2022-02-11T11:29:43Z

 const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized'], // we can use '--start-fullscreen' || --start-maximized
    });

ganfubin · 2022-02-11T11:30:07Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

augustoaraujoo · 2022-08-26T23:11:27Z

const browser = await puppeteer.launch({
    /* headless: false */,
    defaultViewport: null,
    args: ['--start-maximized']
  });

ganfubin · 2022-08-26T23:11:51Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

nickfthedev · 2024-10-24T21:15:51Z

As of today @aslushnikov method still works for anyone having this problem.
const browser = puppeteer.launch({
  defaultViewport: null, // <= set this to have viewport emulation off
});

4 years later, you made my day sir! Thanks!

ganfubin · 2024-10-24T21:16:29Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

TheGP · 2024-10-25T21:04:31Z

That Chinese guy is on vacation for 2 years already

aslushnikov added the feature label Nov 17, 2017

hubidu mentioned this issue Mar 1, 2018

Puppeteer: resizeWindow() does not change window bounds codeceptjs/CodeceptJS#973

Closed

gavoja added a commit to gavoja/CodeceptJS that referenced this issue Mar 29, 2018

Workaround for puppeteer/puppeteer#1183

2dea910

DavertMik pushed a commit to codeceptjs/CodeceptJS that referenced this issue Mar 30, 2018

Workaround for puppeteer/puppeteer#1183 (#1007)

a58d0c5

* Workaround for puppeteer/puppeteer#1183 * Formatting. * Formatting.

yrshaikh mentioned this issue Apr 10, 2018

Neither Page.setViewport() nor paper format can change window width when save as PDF #2333

Closed

aslushnikov mentioned this issue Apr 12, 2018

feat(Page): allow disabling viewport emulation #2364

Closed

valentinmagot mentioned this issue Mar 28, 2019

Added resizeScreenSize steps and tests patheard/cucumber-puppeteer#42

Merged

doonfrs mentioned this issue May 3, 2020

Viewport size not being changes. spiritix/php-chrome-html2pdf#16

Closed

Nurutomo mentioned this issue Oct 15, 2020

Is there a way to resize the innerWidth & innerHeight for Non Headless Chrome? open-wa/wa-automate-nodejs#943

Closed

davemfish mentioned this issue Mar 8, 2021

Bugfix/96 unreliable windows puppeteer natcap/invest-workbench#130

Merged

window inner size not equal to viewport size #1183

window inner size not equal to viewport size #1183

Comments

0xtoorich commented Oct 27, 2017

entrptaher commented Oct 28, 2017 • edited Loading

zicongxie commented Oct 29, 2017 via email

0xtoorich commented Oct 29, 2017

0xtoorich commented Oct 29, 2017

aslushnikov commented Oct 31, 2017

entrptaher commented Oct 31, 2017

0xtoorich commented Nov 1, 2017 • edited Loading

mike-aungsan commented Nov 1, 2017

aslushnikov commented Nov 1, 2017

0xtoorich commented Nov 1, 2017

z-vr commented Nov 15, 2017

radekmie commented Dec 1, 2017

tnoetzel commented Dec 13, 2017

ganfubin commented Jan 15, 2018

leachimsumiri commented Feb 6, 2018

akylkb commented Feb 6, 2018 • edited Loading

Mehuge commented Feb 10, 2018 • edited Loading

tomholub commented Feb 16, 2018

I-keep-trying commented Feb 26, 2018

grantstephens commented Mar 1, 2018

PayteR commented Mar 19, 2018 • edited Loading

winterli commented Apr 10, 2018

Mehuge commented Apr 13, 2018 • edited Loading

junguchina commented Sep 17, 2018 • edited Loading

fergardi commented Sep 24, 2018

DanielRuf commented Sep 24, 2018

fergardi commented Sep 24, 2018

paynecodes commented Apr 9, 2019 • edited Loading

samburgers commented Apr 10, 2019 • edited Loading

redochka commented May 20, 2019

shawnnaquin commented Jun 6, 2019

aslushnikov commented Jun 7, 2019 • edited Loading

meeple142 commented Jun 7, 2019

KotieSmit commented Jul 15, 2019 • edited Loading

deqline commented May 29, 2020

destroyer22719 commented Jul 20, 2020

jonwilliams-bluescape commented Nov 14, 2020

siva349 commented Oct 8, 2021 • edited Loading

f-g-s commented Oct 18, 2021 • edited Loading

danangponorogo commented Nov 15, 2021 • edited Loading

mystic-poet commented Jan 8, 2022

ganfubin commented Jan 8, 2022 via email

vigneshwaran-chandrasekaran commented Feb 11, 2022

ganfubin commented Feb 11, 2022 via email

augustoaraujoo commented Aug 26, 2022

ganfubin commented Aug 26, 2022 via email

nickfthedev commented Oct 24, 2024

ganfubin commented Oct 24, 2024 via email

TheGP commented Oct 25, 2024

entrptaher commented Oct 28, 2017 •

edited

Loading

0xtoorich commented Nov 1, 2017 •

edited

Loading

akylkb commented Feb 6, 2018 •

edited

Loading

Mehuge commented Feb 10, 2018 •

edited

Loading

PayteR commented Mar 19, 2018 •

edited

Loading

Mehuge commented Apr 13, 2018 •

edited

Loading

junguchina commented Sep 17, 2018 •

edited

Loading

paynecodes commented Apr 9, 2019 •

edited

Loading

samburgers commented Apr 10, 2019 •

edited

Loading

aslushnikov commented Jun 7, 2019 •

edited

Loading

KotieSmit commented Jul 15, 2019 •

edited

Loading

siva349 commented Oct 8, 2021 •

edited

Loading

f-g-s commented Oct 18, 2021 •

edited

Loading

danangponorogo commented Nov 15, 2021 •

edited

Loading