Hamburger menu is not visible on safari mobile

Question

I have a problem with my site displaying on Safari on iPhone.

It works fine on Chrome and Firefox on mobile screens. On Safari the div with menu hamburger disappears.

Look at the screenshots below:

The site on Chrome/Firefox:

The site on Safari:

Do you have any idea why it breaks on Safari? I would be very grateful for any tips.

Here is the link to the site: https://sylwiavv.github.io/blood-donation-landing-page-starter-master

Here is the link to the source code: https://github.com/sylwiavv/blood-donation-landing-page-starter-master

Thanks!

Answer 1

It is because of the overflow-y: hidden in style.css (Repo) line 169.

  .overlay{
    height:100%;
    width:0;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    background-color:#f995c2;
    /* overflow-y:hidden;          /* Remove this line */
    transition:0.6s;
  }

Removing it works! Even setting the rule with appropriate width and height like this way works:

.overlay{
  height:75px;
  width:100%;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  background-color:#f995c2;
  overflow-y:hidden;
  transition:0.6s;
}