Strange bias with Watir / Capybara and PhantomJS

I want to locate elements on a page using Watir and PhantomJS. My second approach using Capybara resulted in the same bias.

While the items on the left side look good, the right side is offset:

I took a screenshot before and after I grabbed the positions for each element with element.wd.location

, but the offset is always the same. I've used evaluate_script

it .getBoundingClientRect()

with Capybara too.

One thing looks suspicious to me: the search input box is not loaded correctly and not only displays misalignment but also a different size and the magnifying glass is not displayed. I don't know if this is causing the bias.

I tested it with pure PhantomJS 2.1.1 ( phantomjs file.js

):

var fs = require('fs');
var page = require('webpage').create();

page.viewportSize = {
  width: 1024,
  height: 768
};

page.open('http://en.wikipedia.org/', function() {
  var positions = page.evaluate(function() {
    positions = [];
    elements = document.getElementsByTagName('IMG');
    for (var i=0, l=elements.length; i<l; i++) {
      pos = elements[i].getBoundingClientRect();
      positions.push(pos.left + ' ' + pos.top);
    };
    return positions;
  });

  fs.write('test.txt', positions.join("\r\n"), 'w');

  page.render('test.png');
  phantom.exit();
});

      

        
        
        
      

    

Same result: if you open test.png, you see the image on the right (left: 952px, top: 259px), but test.txt shows it is shifted to the left (left: 891px).

Do you know what could be causing this problem?