question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This challenge does not pass in Firefox but does in Chrome.

See original GitHub issue

Challenge make-elements-only-visible-to-a-screen-reader-by-using-custom-css has an issue. User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:47.0) Gecko/20100101 Firefox/47.0. Please describe how to reproduce this issue, and include links to screenshots if possible.

Using Firefox 47.0 enter the below code and click run tests. It will not pass. Open Chrome and click tests. It passes.



<head>
  <style>
  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <header>
    <h1>Training</h1>
    <nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
    <figure>
      <!-- Stacked bar chart of weekly training-->
      <p>[Stacked bar chart]</p>
      <br />
      <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
    </figure>
    <table class="sr-only">
      <caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
      <thead>
        <tr>
          <th></th>
          <th scope="col">Stealth &amp; Agility</th>
          <th scope="col">Combat</th>
          <th scope="col">Weapons</th>
          <th scope="col">Total</th>                                        
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Week One</th>
          <td>3</td>
          <td>5</td>
          <td>2</td>
          <td>10</td>
        </tr>
        <tr>
          <th scope="row">Week Two</th>
          <td>4</td>
          <td>5</td>
          <td>3</td>
          <td>12</td>
        </tr>
        <tr>
          <th scope="row">Week Three</th>
          <td>4</td>
          <td>6</td>
          <td>3</td>
          <td>13</td>
        </tr>
      </tbody>
    </table>
  </section>
  <section id="stealth">
    <h2>Stealth &amp; Agility Training</h2>
    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
    <article><h3>No training is NP-complete without parkour</h3></article>
  </section>
  <section id="combat">
    <h2>Combat Training</h2>
    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
    <article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
  </section>
  <section id="weapons">
    <h2>Weapons Training</h2>
    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
  </section>
  <footer>&copy; 2016 Camper Cat</footer>
</body>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
anhtran1906commented, Dec 9, 2017

I aslo tested this in Firefox 57.0.1 and all the tests passed. Should we just mention what version of Firefox will work well with fCC on Beta release? screen shot 2017-12-09 at 2 50 59 pm

1reaction
JacksonBatescommented, Nov 28, 2017

I just tested this in Firefox 57 and it no longer seems to be a problem:

image

Or am I missing something? Do we want it to work in older versions of FF too?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Firefox 69.0.1 unable to pass site with "checking your browser ...
Chrome and Edge work fine with site that has Cloudflare DDOS protection but Firefox can't get pass "Checking your browser before accessing.".
Read more >
JS does not work in google chrome and it only works on firefox
But my problem is that my code works perfectly on Firefox ,but it does not work in chrome or other browsers. const color...
Read more >
Top 7 Challenges Of Cross Browser Testing With Solutions
Issue #2: Lack of a Valid HTML/CSS​​ Not every browser is as forgiving as Firefox and Chrome when it comes to interpreting CSS...
Read more >
Selenium Headless Browser Testing - Tools QA
How to run Selenium headless browser tests on Chrome, Firefox and Edge? ... These programs execute like any other browser but do not...
Read more >
From 0 to 70% Market Share: How Google Chrome Ate ... - Nira
Chrome isn't just a great browser. It's also a great example of how a single product can challenge conventional wisdom and reshape how...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found