Strange offset with Watir/Capybara and PhantomJS

Do you know what could cause this offset?

A bug in PhantomJS v2.1.1 or in the embedded Qt WebEngine.

Is there any workaround ?

No.

But I want it to work anyway, how?

Fix it yourself or hire someone to fix it or wait for it to be fixed.

Note that the issue no longer occurs in version 2.5, but it is still in beta :

https://github.com/ariya/phantomjs/milestone/16
https://bitbucket.org/ariya/phantomjs/downloads/

Here's a screenshot taken with phantomjs-2.5.0-beta :

This seems to be an issue in PhantomJS.

On the GitHub thread of the issue, @dantarion seems to have found a solution:

I am running this as well. My fix is to run the following on the page in an evaluate block to force PhantomJS to render at the right height viewport. It works for my use case, and while I want to see it fixed in 2.2, since its still an issue I thought I'd post here.

    document.getElementsByTagName("body")[0].style.overflow = "hidden";    document.getElementsByTagName("body")[0].style.height = "1080px";    document.getElementsByTagName("body")[0].style.maxHeight = "1080px";    document.getElementsByTagName("html")[0].style.overflow = "hidden";    document.getElementsByTagName("html")[0].style.height = "1080px";    document.getElementsByTagName("html")[0].style.maxHeight = "1080px";

It seems to be solving the problem. The only problem being that background-size: cover might still be off (as reported by @Luke-SF).