title: ElementNotVisibleError when using headless chrome for testing in rails
body: <p>I test following assumption <code>And I click on the text "2018/2019" within ".year"</code> with capybara/headless_chrome and constantly get the error</p>
  
  <pre><code>element not visible
      (Session info: headless chrome=67.0.3396.87)
      (Driver info: chromedriver=2.40.565386 (45a059dc425e08165f9a10324bd1380cc13ca363),platform=Mac OS X 10.13.5 x86_64) (Selenium::WebDriver::Error::ElementNotVisibleError)
  </code></pre>
  
  <p>I've already tried to adjust the window size, as suggested <a href="https://stackoverflow.com/questions/49701561/chrome-headless-element-not-visible/50506257">here</a>. But it didn't work.
  My step definition:</p>
  
  <pre><code>When(/^(?:|I )click on the text "([^"]*)"(?: within "([^"]*)")?$/) do |link, selector|
    begin
      page.find(:css, selector).click
    end
  end
  </code></pre>
  
  <p>The element is actually visible and found by Capybara </p>
  
  <p><a href="https://i.stack.imgur.com/wS1qF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wS1qF.png" alt="enter image description here"></a></p>
  
  <pre><code>[1] pry(#&lt;Cucumber::Rails::World&gt;)&gt; page.find(:css, ".year")
      =&gt; #&lt;Capybara::Node::Element tag="a" path="/html/body/div[2]/div[2]/section/div[2]/div/div[1]/div[1]/div[2]/div/div[2]/ul/li/a"&gt;
  </code></pre>
  
  <p>But click fails </p>
  
  <pre><code>[2] pry(#&lt;Cucumber::Rails::World&gt;)&gt; page.find(:css, ".year").click
      Selenium::WebDriver::Error::ElementNotVisibleError: element not visible
  </code></pre>
  
  <p>Why doesn't <code>click</code> work here?</p>
  
  <p>EDIT:
  The HAML of the link is </p>
  
  <pre><code>           %ul.facet_values
              - unselected.each do |facet_value|
                %li.filtered{data: {hayf: {text: facet_value.name.downcase}}}
                  = link_to facet_value.path, title: facet_value.name, class: 'year' do
                    =truncate("#{facet_value.name}", length: 24)
                  - if facet.has_counts?
                    %span.small="(#{facet_value.count})"
  </code></pre>
  
  <p>I tried headless testing with <code>Poltergeist</code> and got <code>Poltergeist detected another element with CSS selector 'html body header div.container-fluid' at this position</code> which was solved with <code>.trigger('click')</code> and the test passed.</p>