title: Delay on simplest HTML page with Javascript
body: <p>I'm hosting this super simple HTML page, it's basically one screen that shows one of 8 tabs at a time. Basically the following, but with 8 tabs instead of the 2 I'm showing here :</p>
  
  <pre><code>&lt;div id="global"&gt;
    &lt;nav&gt;
      &lt;a href="#" id="nav1" class="navBtn" onclick="switchSlide(event, 1);"&gt;Slide 1&lt;/a&gt;
      &lt;a href="#" id="nav2" class="navBtn" onclick="switchSlide(event, 2);"&gt;Slide 2&lt;/a&gt;
    &lt;/nav&gt;
    &lt;div id="content"&gt;
      &lt;section id="slide1"&gt;
        &lt;img src="./ss01.jpg" /&gt;
      &lt;/section&gt;
      &lt;section id="slide2"&gt;
        &lt;img src="./ss02.jpg" /&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When you click a tab, here's the function that does the transition :</p>
  
  <pre><code>function switchSlide(e, slideNum) {
    e.preventDefault();
    for (x=0; x&lt;document.getElementsByTagName("section").length; x++) {
      document.getElementsByTagName("section")[x].className = "";
      document.getElementsByClassName("navBtn")[x].className = "navBtn";
    }
    document.getElementById("slide"+slideNum).className = "active";
    document.getElementById("nav"+slideNum).className = "navBtn active";
  }
  </code></pre>
  
  <p>The crossfade transition is handled by CSS, the transition has a duration but no delay.</p>
  
  <pre><code>section {
    opacity:0;
    transition:opacity 0.6s;
  }
  
  section.active {
    opacity:1;
  }
  </code></pre>
  
  <p>When I test the page on my computer, the transition starts instantly after clicking on the tab. But when I test on my iPad or phone, when I touch the tab, it instantly detects the active/hover/focus state, but then there's a half-second delay, and <em>then</em> the tab changes colors and the content starts transitioning.</p>
  
  <p>I would've thought that such a simple page would be lightning-fast!
  I've tried browsing Amazon on my devices and their buttons react way faster than my tab does. So I'm assuming it's not just due to how the device operates.
  Also I've tried limiting my page to 2 tabs instead of 8, and it didn't go any faster.
  Also I've tried hosting my page on 2 different servers, and that didn't help either.
  What am I missing ?</p>
  
  <p>Thanks for your help !</p>