Delay on simplest HTML page with Javascript

Question

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 :

<div id="global">
  <nav>
    <a href="#" id="nav1" class="navBtn" onclick="switchSlide(event, 1);">Slide 1</a>
    <a href="#" id="nav2" class="navBtn" onclick="switchSlide(event, 2);">Slide 2</a>
  </nav>
  <div id="content">
    <section id="slide1">
      <img src="./ss01.jpg" />
    </section>
    <section id="slide2">
      <img src="./ss02.jpg" />
    </section>
  </div>
</div>

When you click a tab, here's the function that does the transition :

function switchSlide(e, slideNum) {
  e.preventDefault();
  for (x=0; x<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";
}

The crossfade transition is handled by CSS, the transition has a duration but no delay.

section {
  opacity:0;
  transition:opacity 0.6s;
}

section.active {
  opacity:1;
}

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 then the tab changes colors and the content starts transitioning.

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 ?

Thanks for your help !

score 1 · Accepted Answer · answered Oct 11 '18 at 16:15

Mobile browsers include a 300ms delay after clicking. There's a few workarounds for this, but one that worked for me is to include the viewport in the head :

<meta name="viewport" content="width=device-width, user-scalable=no">

Other solutions can be found here : Eliminate 300ms delay on click events in mobile Safari

Delay on simplest HTML page with Javascript

1 Answers1