title: How to make correspond PhantomJS screenshot dimension with an actual webpage?
body: <p>I am taking a screenshot from an webpage of mine with PhantomJS.  The code is simply</p>
  
  <pre><code>var page = require('webpage').create();
  page.open('Target_Zone_Selection.html', function () {
      page.viewportSize = {width: 1024, height: 800};
      page.render('test.png');
      phantom.exit();
  });
  </code></pre>
  
  <p>Everything work fine, but what I want to do then is to make correspond the screenshot with the actual webpage (as seen on a browser with the accurate viewport size).  My ultimate goal is to get the mouse position and make correspond this position on the screenshot.</p>
  
  <p>And there is the problem : the webpage size is different from the rendering from PhantomJS.  I've tried several solution, as going through the DOM and take each offset position to find the dimension of the screenshot, but there is always a problem.  This method works for the width, but not for the height.</p>
  
  <p>Could someone describe a way to make the webpage and the screenshot correspond ?  Thanks a lot !</p>
  
  <p>UPDATE :
  The problem is spotted : my webpage contains canvas, buttons, text form and some html.  The only element which does not give the same size once rendered with PhantomJS is the button...  And the rendering of the button differs also between browsers...</p>
  
  <p>Any suggestion to predict the rendered size of a button ?</p>