Zindex issue with -webkit-overflow-scrolling: touch; in safari

Question

I am having issue with z-index on header only for iphone and tried multiple ways and also took reference from here https://stackoverflow.com/questions/37696746/ios-not-respecting-z-index-with-webkit-overflow-scrolling. When we scroll horizontally, I want the icons to appear above shadow.

Here is the code:

.masthead-nav-container {
    position: relative;
    background: #161D25;
}

.masthead-nav {
display: flex;
justify-content: space-between;
align-items: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
white-space: nowrap;
height: 52px;
border-top: 1px solid #535B63;
}

.masthead-nav-topics-item:last-child {
margin-right: 96px;
}

.masthead-nav-container::after {
background: linear-gradient(to right, rgba(22, 29, 37, 0), #161D25);
content: "";
position: absolute;
right: 0;
top: 1px;
bottom: 0;
height: 100%;
width: 96px;
z-index: 1;
}

.masthead-nav-topics {
margin-left: 16px;
line-height: 1;
}

.masthead-nav-topics-item {
display: inline-block;
margin-right: 24px;
}

.masthead-nav-topics-anchor {
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #fbfbfb;
}

.masthead-nav-social {
position: relative;
line-height: 1;
z-index: 5;
}

.masthead-nav-social-item {
display: inline-flex;
margin-left: 8px;
}

.masthead-nav-social-anchor {
width: 24px;
height: 24px;
background: #72DA38;
}

.masthead-nav-social-item:last-child {
margin-right: 16px;
}

<div class="masthead-nav-container js-nano-container">
 <nav class="masthead-nav ">
     
   <ul class="masthead-nav-topics">
      <li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Análisis</a></li>
   <li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Xataka Selección</a></li>
   <li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Móviles</a></li>
   <li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Inteligencia Artificial</a></li>
   <li class="masthead-nav-topics-item"><a class="masthead-nav-topics-anchor" href="#">Asistentes de voz</a></li>
   </ul>
   <ul class="masthead-nav-social">
    <li class="masthead-nav-social-item"><a href="#" class="masthead-nav-social-anchor masthead-social-flipboard" rel="nofollow"></a></li>

     <li class="masthead-nav-social-item"><a href="#" class="masthead-nav-social-anchor masthead-social-instagram" rel="nofollow"></a></li>

    <li class="masthead-nav-social-item"><a href="#" class="masthead-nav-social-anchor masthead-social-youtube" rel="nofollow"></a></li>

     <li class="masthead-nav-social-item"><a href="#" class="masthead-nav-social-anchor masthead-social-twitter" rel="nofollow"></a></li>

 </ul>
 </nav>
</div>

Note: It is only appearing in iphone and ipad safari browser

Zindex issue with -webkit-overflow-scrolling: touch; in safari

0 Answers0