html – What’s inflicting my z-index CSS guidelines to not be thought-about in iOS?

I’ve a sidebar that’s positioned completely and animated to transition in when clicking a hamburger icon. Picture connected.

Sidebar because it seems domestically

Nonetheless when navigating to it on an iPhone utilizing safari and clicking off, the sidebar turns into clear and persists whereas utilizing the app. The location is absolutely practical whereas the textual content floats above the display screen.

Right here is the CSS for the navigation part. The ul tag includes the world affected by this challenge.

#navigation {
  top: 100vh;
  show: flex;
  align-items: middle;
  place: fastened;
  background-color: white;

  @media solely display screen and (max-width: $cellular) {
    place: relative;
  }

  ul {
    list-style-type: none;
    padding-right: 40px;
    show: flex;
    flex-direction: column;
    hole: 24px;
    place: absolute;
    prime: 150px;
    left: 15px;
    margin: 0;

    li {
      cursor: pointer;
      show: flex;
      align-items: middle;
      justify-content: middle;
      width: 40px;
      top: 40px;
      background: none;
      place: relative;
      box-shadow: 0px 10px 10px rgba(41, 43, 44, 0.05),
        2px 5px 20px rgba(78, 78, 79, 0.05), 0px 5px 5px rgba(41, 43, 44, 0.1),
        0px 1px 5px rgba(78, 78, 79, 0.14);
      border-radius: 100px;

      div {
        show: flex;
        justify-content: middle;
        align-items: middle;

        svg {
          top: 20px;

          path {
            stroke: black;
          }
        }
      }

      .notification {
        padding: 2px;
        place: absolute;
        width: 18px;
        top: 18px;
        background: $coral-100;
        proper: 12px;
        prime: 12px;
        coloration: white;
        font-weight: 600;
        font-size: 10px;
        line-height: 14px;
        text-align: middle;
        letter-spacing: -0.01em;
        border-radius: 45%;
      }

      &.lively {
        background: $coral-20;
        border-radius: 100px;

        div {
          svg {
            path {
              stroke: $primary-colour;
            }
          }
        }

        &:nth-child(3) {
          div {
            &.lively {
              svg {
                path {
                  fill: $primary-colour;
                }
              }
            }
          }
        }
      }

      .nav-text {
        show: none;
      }
    }
  }

  .mobile-nav-control {
    place: fastened;
    prime: 30px;
    show: none;
    proper: 40px;
    transition: opacity 0.5s linear;
    rework: translate(0);
  }

  @media solely display screen and (max-height: 700px) and (min-width: $cellular) {
    margin-top: 50px;
    transition: all 50ms;
  }
}

.lively svg {
  path {
    stroke: $primary-colour;
  }
}

I’ve tried isolating the show context to try to pressure a singular z-index for the #navigation div as I’ve heard IOS follows its personal guidelines with Z-index however this didn’t repair the difficulty.