Specs are passing locally but not on CircleCI, running poltergeist + phantomjs

Question

My specs are passing when I run then on my local setup as well as on my colleague's setup. But they refuse to pass on our CI.

I'm getting the following error:

Failure/Error: page.create_template_shift(user, day)
     Capybara::Poltergeist::MouseEventFailed:
       Firing a click at co-ordinates [960, 267.5] failed. Poltergeist detected another element with CSS selector 'html.js.no-flexbox.flexboxlegacy.canvas.canvastext.no-webgl.touch.no-geolocation.postmessage.websqldatabase.no-indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.no-csstransforms3d.csstransitions.fontface.generatedcontent.no-video.no-audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths body.templates.show.modal-open div.modal-backdrop.fade.in' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').

And here is the screenshot from capybara-screenshot:

As you can see I'm trying to click on "Save" button but it can not because there seems to be a div that is black/faded that is covering the entire screen.

How can this happen only in their environment? And why is this happening?

EDIT: Updated image and example.

Answer 1

It turned out to be a package in my bower.json file that was breaking the specs. When running it in CircleCI the latest package was downloaded due to the ~ character right before the version number inside bower.json.

I had an older package on my local environment.