Capybara element is not clickable at point with firefox

Question

I have a Capybara/Cucumber test running in firefox that will not click an svg element. I have the equivalent test working on other elements that are of the same type, but Capybara is telling me this error for this specific element:

Element is not clickable at point (1179.5, 172.96665954589844). Other element would receive the click: <svg height="124" width="290"></svg> (Selenium::WebDriver::Error::UnknownError)

The click looks like:

find("#partner-profit-chart svg g.pie-slice._1").click

And the actual site is hosted here http://mrr.devtechlab.com/mrr-dashboard.html, the element that it won't click is the third pie chart on the right. I am able to click the other pie charts just fine, but somehow Selenium thinks it will click the SVG containing the element for only this chart???

EDIT: Ended up manually clicking the d3 element using the following(jquery click doesn't work on d3 elements FYI):

execute_script(
%Q(
  jQuery.fn.d3Click = function () {
    this.each(function (i, e) {
      var evt = new MouseEvent("click");
      e.dispatchEvent(evt);
    });
  };
  $("#partner-profit-chart svg g.pie-slice._1 path").d3Click();

)

)

Answer 1

Selenium attempts to click in the middle of the bounding box of an element. The issue here is that with a highly concave shape the center of the bounding box isn't actually in the element, and therefore the click is going through to the encapsulating svg element. Since this page is using jQuery, your best bet may just be to use #execute_script to find the element and trigger click on it.