Fixed Positioning/Z-Index Issue in Mobile Safari

Mobile safari position:fixed z-index glitch when scrolling

z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.

transform:translateZ(1px);

on your page elements.

EDIT:
In your code,
Add this css:

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

and then remove z-index refs from those elements and .intro.

Z-index not working in Safari iPhone with iOS16

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)
}

Position fixed being cut off on safari

Without knowing your html code i speculated that the parent container and the tool tip element are not at the same level so even if you increase z-index value it won't change.
Place the element at the same level that would work.Something like this

<parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level

Mobile Safari Z-Index Not Working

This is a known issue with the library:

• https://github.com/usablica/intro.js/issues/532
• https://github.com/usablica/intro.js/issues/507
• https://github.com/usablica/intro.js/issues/401
• https://github.com/usablica/intro.js/issues/123

...to name a few.

The issue is the stacking context and the way that introJs makes elements appear on top:

The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).

So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.

z-index not working on Safari on IOS

Add the z-index: to the

.navbar-default: 

Class.

This should bring the whole navbar forward and its contents.

---

Related Topics