Capybara Webkit не распознает запрос @media для минимальной ширины в CSS

Question

В моем CSS-коде для моей навигационной панели приложения я скрываю настольную версию в более низких разрешениях и отображаю только мобильный элемент. Помимо определенной точки останова, я переключаю ее только на отображение версии для настольного компьютера -

.container {
  .nav-menu.desktop { display: none; }
  .nav-menu.mobile {
    // Mobile CSS
  }

  @media (min-width: 690px) {
    .nav-menu.mobile { display: none; }
    .nav-menu.desktop {
      // Desktop CSS
    }
  }
}

Чтобы проверить это, мои (упрощенные) спецификации выглядят примерно так

context "mobile", :mobile do
  before(:each) do
    # Resize window to mobile
    Capybara.current_session.windows[0].resize_to(400, 730)
  end

  it "user can click a link in the navbar" do
    visit root_path
    click_link("some mobile link")
    expect(page).to have_current_path(home_index_path)
  end
end

context "desktop" do
  before(:each) do
    # Resize window to desktop
    Capybara.current_session.windows[0].resize_to(1440, 800)
  end

  it "user can click a link in the navbar" do
    visit root_path
    click_link("some desktop link")
    expect(page).to have_current_path(home_index_path)
  end
end

Мои спецификации рабочего стола не работают, потому что он не может найти nav-menu.desktop элемент, который должен отображаться в этой резолюции.

Я думаю, что проблема в том, что в CSS это не признает медиа-запрос для min-width и поэтому он по-прежнему применяет display: none Правило для элемента рабочего стола. Я могу подтвердить эту покупку, комментируя это, и тогда тест проходит нормально, а также визуально, используя save_and_open_screenshot

Это также объясняет, почему нет проблем с мобильными спецификациями, так как CSS по умолчанию написан для мобильного разрешения.

Есть ли способ заставить Capybara Webkit признать правило медиазапроса?

С помощью capybara-webkit (1.11.1) а также capybara (2.7.1)

Спасибо!