{"action":"created","issue":{"url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/1815","repository_url":"https://api.github.com/repos/GoogleChrome/puppeteer","labels_url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/1815/labels{/name}","comments_url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/1815/comments","events_url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/1815/events","html_url":"https://github.com/GoogleChrome/puppeteer/issues/1815","id":289071040,"node_id":"MDU6SXNzdWUyODkwNzEwNDA=","number":1815,"title":"page.pdf() captures application before end of resize animation","user":{"login":"tibdex","id":6574550,"node_id":"MDQ6VXNlcjY1NzQ1NTA=","avatar_url":"https://avatars3.githubusercontent.com/u/6574550?v=4","gravatar_id":"","url":"https://api.github.com/users/tibdex","html_url":"https://github.com/tibdex","followers_url":"https://api.github.com/users/tibdex/followers","following_url":"https://api.github.com/users/tibdex/following{/other_user}","gists_url":"https://api.github.com/users/tibdex/gists{/gist_id}","starred_url":"https://api.github.com/users/tibdex/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tibdex/subscriptions","organizations_url":"https://api.github.com/users/tibdex/orgs","repos_url":"https://api.github.com/users/tibdex/repos","events_url":"https://api.github.com/users/tibdex/events{/privacy}","received_events_url":"https://api.github.com/users/tibdex/received_events","type":"User","site_admin":false},"labels":[{"id":1151987126,"node_id":"MDU6TGFiZWwxMTUxOTg3MTI2","url":"https://api.github.com/repos/GoogleChrome/puppeteer/labels/chromium","name":"chromium","color":"d1c4e9","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-01-16T22:00:38Z","updated_at":"2018-12-10T16:18:42Z","closed_at":null,"author_association":"NONE","body":"### Steps to reproduce\r\n\r\n**Tell us about your environment:**\r\n\r\n* Puppeteer version: 1.0.0\r\n* Platform / OS version: Fedora 27\r\n* URLs (if applicable): \r\n* Node.js version: 6.5.0\r\n\r\n**What steps will reproduce the problem?**\r\n\r\n```javascript\r\n'use strict';\r\n\r\nconst puppeteer = require('puppeteer');\r\n\r\nconst inIsolatedSession = ({action, dimensions, url}) =>\r\n  puppeteer.launch().then(browser =>\r\n    browser\r\n      .newPage()\r\n      .then(page =>\r\n        Promise.resolve()\r\n          .then(() => page.setViewport(dimensions))\r\n          .then(() => page.goto(url, {waitUntil: ['networkidle0']}))\r\n          .then(() => action(page))\r\n      )\r\n      .then(result => browser.close().then(() => result))\r\n  );\r\n\r\nconst dimensions = {height: 800, width: 800};\r\nconst url = 'https://youtube.com';\r\n\r\n[\r\n  page =>\r\n    page.pdf(\r\n      Object.assign(\r\n        {\r\n          pageRanges: '1',\r\n          path: 'test.pdf',\r\n          printBackground: true,\r\n        },\r\n        dimensions\r\n      )\r\n    ),\r\n  page => page.screenshot({path: 'test.png'}),\r\n].forEach(action => {\r\n  inIsolatedSession({\r\n    action,\r\n    dimensions,\r\n    url,\r\n  });\r\n});\r\n```\r\n\r\n**What is the expected result?**\r\n\r\nThe PDF and PNG file content should _look the same_.\r\n\r\n**What happens instead?**\r\n\r\nHere is the PNG:\r\n\r\n![PNG](https://user-images.githubusercontent.com/6574550/35011909-d6c5d6d2-fad5-11e7-9afc-a3e15ae24369.png)\r\n\r\nAnd [here](https://github.com/GoogleChrome/puppeteer/files/1636769/test.pdf) is the PDF that looks like this:\r\n\r\n![PDF](https://user-images.githubusercontent.com/6574550/35011948-fa70ff58-fad5-11e7-8542-394f97fabc24.png)\r\n\r\nThe PNG is what I expect: the application is centered in the middle of the screen.\r\nIn the PDF however, the application was captured in the middle of a resize animation, leading to a shifted content.\r\n\r\nWhen enabling the debug output, I can see this:\r\n\r\n```\r\npuppeteer:session SEND ► {\"id\":13,\"method\":\"Page.printToPDF\",\"params\":{\"landscape\":false,\"displayHeaderFooter\":false,\"headerTemplate\":\"\",\"footerTemplate\":\"\",\"printBackground\":true,\"scale\":1,\"paperWidth\":8.333333333333334,\"paperHeight\":8.333333333333334,\"marginTop\":0,\"marginBottom\":0,\"marginLeft\":0,\"marginRight\":0,\"pageRanges\":\"1\"}} +3ms\r\npuppeteer:session ◀ RECV {\"method\":\"Page.frameResized\",\"params\":{}} +319ms\r\npuppeteer:session ◀ RECV {\"method\":\"Page.frameResized\",\"params\":{}} +0ms\r\npuppeteer:session ◀ RECV {\"id\":13,\"result\":{\"data\": ... PDF content ...\r\n```\r\n\r\nSo, even though the viewport was already the right one (see call to `page.setViewport(dimensions)` above), the `Page.frameResized` event was still fired just before triggering the PDF export, probably not letting enough time to the application to finish its resize animation.\r\n\r\nIs this a problem upstream in Chromium or can it be fixed in Puppeteer?\r\n\r\nThanks for your help!\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/comments/445874783","html_url":"https://github.com/GoogleChrome/puppeteer/issues/1815#issuecomment-445874783","issue_url":"https://api.github.com/repos/GoogleChrome/puppeteer/issues/1815","id":445874783,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NTg3NDc4Mw==","user":{"login":"RyM934","id":31664845,"node_id":"MDQ6VXNlcjMxNjY0ODQ1","avatar_url":"https://avatars2.githubusercontent.com/u/31664845?v=4","gravatar_id":"","url":"https://api.github.com/users/RyM934","html_url":"https://github.com/RyM934","followers_url":"https://api.github.com/users/RyM934/followers","following_url":"https://api.github.com/users/RyM934/following{/other_user}","gists_url":"https://api.github.com/users/RyM934/gists{/gist_id}","starred_url":"https://api.github.com/users/RyM934/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyM934/subscriptions","organizations_url":"https://api.github.com/users/RyM934/orgs","repos_url":"https://api.github.com/users/RyM934/repos","events_url":"https://api.github.com/users/RyM934/events{/privacy}","received_events_url":"https://api.github.com/users/RyM934/received_events","type":"User","site_admin":false},"created_at":"2018-12-10T16:18:42Z","updated_at":"2018-12-10T16:18:42Z","author_association":"NONE","body":"I believe I'm seeing this issue as well. I have a debounce delay handler on window resize event for an expensive canvas redraw and exporting to pdf using puppeteer doesn't give any options for delaying creating of the pdf after the resize event that occurs in the pdf() method of page. Launching with a SloMo delay doesn't seem to have an effect in this instance either. Did you ever come up with a good workaround @tibdex?"}}
{"actor":{"display_login":"RyM934"}}