title: How to make screen capture render properly
body: <p>In the image on the left is what the casper script rendered on the right is what chrome rendered. I blurred out the copy and images to protect brand identity. <img src="https://i.stack.imgur.com/5chW3.png" alt="enter image description here"></p>
  
  <p>I followed this example for developing my screen capture script
  <a href="http://code.tutsplus.com/tutorials/responsive-screenshots-with-casper--net-33142" rel="nofollow noreferrer">http://code.tutsplus.com/tutorials/responsive-screenshots-with-casper--net-33142</a></p>
  
  <p>I end up getting an improper rendering of the homepage. It looks as if one section of the page has it's width hard coded.</p>
  
  <p>In my code I create an array of viewport parameters and userAgent. Then loop through the array. When I call casper.thenOpen I then wait 1000ms before taking the screenshot. I added the 1000ms wait when I saw the issue but it made no difference.</p>
  
  <pre><code>var viewportSizes = [
      [1280,800,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36'],
      [1440,900,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36']
  ],
      url = 'http://MY_DOMAIN/',
      saveDir = 'tests/casperjs/screenshots/' + url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, '');
  
  
  casper.start();
  
  
  casper.each(viewportSizes, function(self, viewportSize, i) {
  
      // set two vars for the viewport height and width as we loop through each item in the viewport array
      var width = viewportSize[0],
          height = viewportSize[1],
          userAgent = viewportSize[2];
  
  
      //give some time for the page to load
      casper.wait(5000, function() {
  
          //set the viewport to the desired height and width
          this.viewport(width, height);
          this.userAgent(userAgent);
          casper.thenOpen(url, function() {
              this.echo('Opening at ' + width);
  
              //Set up two vars, one for the fullpage save, one for the actual viewport save
              var FPfilename = saveDir + '/fullpage-' + width + ".png";
              var ACfilename = saveDir + '/' + width + '-' + height + ".png";
  
              //Capture selector captures the whole body
              this.captureSelector(FPfilename, 'body');
  
              //capture snaps a defined selection of the page
              this.capture(ACfilename,{top: 0,left: 0,width: width, height: height});
              this.echo('snapshot taken');
          });
      });
  });
  
  casper.run(function() {
      this.echo('Finished captures for ' + url).exit();
  });
  </code></pre>
  
  <p>I'm executing this through a grunt task that uses the PhantomJS engine. I am wondering if its an issue with the way PhantomJS interprets the CSS. Since PhantomJS is using Webkit, I would expect it to render the page the same way as Google Chrome.</p>