I have a bottom navbar and am encountering a very strange issue. It works perfectly in Chrome (Android) but in Safari (iOS) it doesn't.
The even stranger issue seems to be that "onclick" events work on the navbar, so it definitely seems to be there, it just isn't visible.
I've been at this for hours and can't figure it out. Anyone have any ideas what could be wrong?
.mobile-bottom-nav {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
will-change: transform !important;
transform: translateZ(0) !important;
display: flex !important;
height: 60px !important;
background-color: #fff !important;
max-width: 600px;
margin: 0 auto;
}
.mobile-bottom-nav__item {
flex-grow: 1 !important;
text-align: center !important;
font-size: 0.8rem !important;
display: block !important;
flex-direction: column !important;
justify-content: center !important;
font-weight: 600;
height: 60px !important;
}
.mobile-bottom-nav__item--active {
color: #FF0030;
}
.mobile-bottom-nav__item-content {
display: flex;
flex-direction: column;
margin-top: 5px;
z-index: 1001 !important;
}<nav class="mobile-bottom-nav">
<div class="mobile-bottom-nav__item" onclick="">
<div class="mobile-bottom-nav__item-content mobile-bottom-nav__item--active">
Section 1
</div>
</div>
<div class="mobile-bottom-nav__item" onclick="">
<div class="mobile-bottom-nav__item-content">
Section 2
</div>
</div>
<div class="mobile-bottom-nav__item" onclick="">
<div class="mobile-bottom-nav__item-content">
Section 3
</div>
</div>
</nav>As you can see, I tried adding z-index but that also didn't work.
UPDATE It seems removing these 2 lines made it show up:
will-change:transform !important;
transform: translateZ(0) !important;