{"action":"opened","issue":{"url":"https://api.github.com/repos/ariya/phantomjs/issues/12906","labels_url":"https://api.github.com/repos/ariya/phantomjs/issues/12906/labels{/name}","comments_url":"https://api.github.com/repos/ariya/phantomjs/issues/12906/comments","events_url":"https://api.github.com/repos/ariya/phantomjs/issues/12906/events","html_url":"https://github.com/ariya/phantomjs/issues/12906","id":55462324,"number":12906,"title":"Page breaking issue with Phantom 1.9.7 (element heights unpredictable)","user":{"login":"Feendish","id":7965244,"avatar_url":"https://avatars.githubusercontent.com/u/7965244?v=3","gravatar_id":"","url":"https://api.github.com/users/Feendish","html_url":"https://github.com/Feendish","followers_url":"https://api.github.com/users/Feendish/followers","following_url":"https://api.github.com/users/Feendish/following{/other_user}","gists_url":"https://api.github.com/users/Feendish/gists{/gist_id}","starred_url":"https://api.github.com/users/Feendish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Feendish/subscriptions","organizations_url":"https://api.github.com/users/Feendish/orgs","repos_url":"https://api.github.com/users/Feendish/repos","events_url":"https://api.github.com/users/Feendish/events{/privacy}","received_events_url":"https://api.github.com/users/Feendish/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-01-26T09:38:20Z","updated_at":"2015-01-26T09:38:20Z","closed_at":null,"body":"Hi all,\r\n\r\nI'm having a problem with Phantom 1.9.7 and page breaking. \r\n\r\nI'm using a simple invoice JS file:\r\n\r\n```javascript\r\n// html2pdf.js\r\nvar page = new WebPage();\r\nvar system = require(\"system\");\r\n// change the paper size to letter, add some borders\r\n// add a footer callback showing page numbers\r\npage.paperSize = {\r\n    format : 'Letter',\r\n    orientation: \"landscape\",\r\n    margin: {left:\"0.5cm\", right:\"0.5cm\", top:\"0.25cm\", bottom:\"0.25cm\"},\r\n    footer: {\r\n        height: \"0.9cm\",\r\n        contents: phantom.callback(function(pageNum, numPages) {\r\n            return \"<div style='text-align:center;'><small>\" + pageNum +\r\n                \" / \" + numPages + \"</small></div>\";\r\n        })\r\n    }\r\n};\r\npage.zoomFactor = 1;\r\n// assume the file is local, so we don't handle status errors\r\npage.open(system.args[1], function (status) {\r\n    // export to target (can be PNG, JPG or PDF!)\r\n    page.render(system.args[2]);\r\n    phantom.exit();\r\n});\r\n\r\nI pass it in a URL to the HTML invoice pages I want to render to PDF.\r\n\r\nIt mostly works well for most invoices. However certain ones exhibit an annoying issue.\r\n\r\nI have custom jQuery code that runs within the HTML pages to split what is one long HTML table into pages. \r\n\r\nIt relies on calculating the $.outerHeight(true) of the blocks on the page e.g.\r\nI get the height of each row section in a loop and append in a page-break div where I calculated the page needs breaking.\r\n\r\nThis works perfectly well for most Invoices but because the invoice rows have slight variances in row height (they can have from 2-4 line height rows depending on data),\r\nthe breaking doesn't occur correctly in some cases.\r\n\r\nI generated some debug code into the pdf to explicitly show the heights where the break occurs and the maths all add up correctly. \r\n\r\nIt's almost like though that the calculated outerheight is different from the rendered height of the rows by a certain amount of pixels and when you scale that up to 40-50 rows it throughs off the rendering.\r\n\r\nDoes anyone have any suggestions how to get around this? \r\n\r\nI've tried lots of tricks like various overflow CSS rules, rebuilding Phantom 1.9.7 again locally etc but none work."}}