Responsive hamburger menu not working on mobile safari

Question

I have been going in circles looking for a solution to a problem I never thought could exist in 2019.

I am busy building a site and made use of the Hamburger menu for smaller screen sizes. Everything looks good in Google Dev tools for multiple devices, but once I do a real world test on my iPhone the hamburger menus is dead, and the styling of the "Order now!" button is messed up?

Is there an easy way to change the css or JS so that the site can work on ios?

This is my code:

document.addEventListener("click", function (e) {
  if (e.target.id === "burger-time") {
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility = 'hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility = 'visible';
  }
});

#header-nav-background {
  display: block;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, .5);
  height: 54px;
  width: 100%;
}

#header-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, 1);
  z-index: 1200;
}

.button-style {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

#burger-time{
  position: absolute;
  visibility: hidden;
}

@media screen and (max-width: 669px) and (min-width: 300px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 5px solid #02b3e4;
    border-bottom-style: none;
  }
  nav {
    width: 140px;
    height: 400px;
    -webkit-transform: translate(-565px, 0);
    -ms-transform: translate(-140px, 0);
    -moz-transform: translate(-140px, 0);
    -o-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
  }
  .hidden {
    visibility: hidden;
  }

  .li .a {
    display: block;
    color: white;
    padding: 11px 45px 19px 0;
    text-decoration: none;
    width: 100%;
  }

 /* Change the link color to rgba(31, 70, 189, 1) on hover */
  .li .a:hover {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    text-shadow: 1px 1px 0 black;
    background-color: white;
  }

  .button-style {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }

  #header-nav-background {
    display: block;
    background-color: rgb(31, 70, 189);
    background-color: rgba(31, 70, 189, 1);
    height: 54px;
  }

  #burger-time{
    position: absolute;
    visibility: visible;
    display: flex;
    padding: 0 2px 2px 0;
    font-size: 52px;
    transform: translate(140px, 0);
    color: white;
    text-shadow: 2px 2px 2px black;
  }

  #burger-time:hover {
    text-decoration: none;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    font-weight: 600;
    background-color: white;
    text-shadow: 1px 1px 1px black;
  }
  
}

<div id="header-nav-background">
  <nav>
    <ul id="header-ul">
      <li class="li button-style"><a class="a" href="index.html">Home</a></li>
      <li class="li button-style">
        <a class="a" href="services.html">Services</a>
      </li>
      <li class="li button-style"><a class="a" href="about.html">About</a></li>
      <li class="li button-style">
        <a class="a" href="contact.html">Contact us</a>
      </li>
      <i id="burger-time" class="material-icons">menu</i>
    </ul>
  </nav>
</div>

The site is under construction but you can look here to see: http://www.encoreservices.co.za/ESMS/index.html

Answer 1

Ok So after chasing my tale for a whole day eventually some light came threw...

In mobile IOS there is no such thing as "click" as an event listener, however "touched" is in the list of items:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW8

So I tested it and had a small celebration as it worked!!!!! for now I have just duplicated the code so that it works but will have to rewrite this a bit neater later. Next the button style will have to look at that a but later too.

document.addEventListener("touchend", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});

document.addEventListener("click", function(e) {
  if (e.target.id === "burger-time"){
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility ='hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility ='visible';
  }
});

Answer 2

So there is a little more to this than just the "touchend" and "click" differences. MDN documentation had some insightful comments about how to add the event listener for mobile devices!

Best practices section

Here are some best practices to consider when using touch events:

Add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree).

Apparently it is not good practice to use "document.addEventListener()" for mobile devices not just iPhone. They say it is better to select buy individual element. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

That being the case, these changes are what were needed to make the burger menu work on all the devices I have access to:

let rootEvent = document.getElementById("rootElement");

let burgerNav = document.getElementById("burger-time");

burgerNav.addEventListener("click", function(e) {
    document.querySelector('nav').classList.add('open');
    burgerNav.style.visibility ='hidden';
    e.preventDefault();
    e.stopPropagation();


});

closeNav = function(){
    if (burgerNav.style.visibility === "hidden"){
       document.querySelector('nav').classList.remove('open');
       burgerNav.style.visibility ='visible';
    }
};

rootEvent.addEventListener("click", closeNav);
rootEvent.addEventListener("touchend", closeNav);

<html lang="en" dir="ltr" id="rootElement">

This is probable not the only way to do this but if it ant broke...