Search code examples
javascripthtmlcssiossafari

Z-index not working in Safari iPhone with iOS16

I have a navbar that when in mobile mode, in this case in an iPhone with browser Safari this class navbar-mobile is applied to the nav element with javascript.

But somehow the nav won't appear on top.

.navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  -webkit-transform: translate3d(0,0,0);
  z-index: 999 !important;
  -webkit-overflow-scrolling: auto !important;
  margin-top: 0;
}

This happens on all of the sections. These sections are inside a body who has applied a tsparticles component like below.

section {
  transition: ease-in-out 0.3s;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 997;
  overflow-y: auto;
}

<body id="tsparticles"></body>

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
  z-index: -1;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width:100vw;
  height:100vh; 
}

/* ---- tsparticles container ---- */
#tsparticles {
  width: 100%;
  height: 100%;
  z-index: -1;
}

I already tried to use -webkit-transform: translate3d(0,0,0); as suggested but with no luck I can't figure it out. This works in other browser the only problem is really Safari on iPhone.

Solution

  • We had a similar issue on all browsers in IOS 16. Try setting a value between 0-9 for z-index. It solved the issue for us.

    .navbar-mobile {
  position: fixed;
  top: 0;
  .
  .
  z-index: 9;
}

section {
  transition: ease-in-out 0.3s;
  position: relative;
  .
  .
  z-index: 5;
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  .
  .
  z-index: -1; //(or try 1)
}