Flex Navbar 不会在 Safari 中显示，但在 Chrome 中工作

Question

我有一个底部导航栏，遇到了一个非常奇怪的问题。它在Chrome(Android(中运行良好，但在Safari(iOS(中则不然。

更奇怪的问题似乎是"onclick"事件在导航栏上工作，所以它似乎肯定在那里，只是不可见。

我已经做了好几个小时了，想不通。有人知道可能出了什么问题吗？

.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>

正如您所看到的，我尝试添加z-index，但也没有成功。

更新似乎删除了这两行使其显示出来：

will-change:transform !important;
transform: translateZ(0) !important;

Answer 1

几乎所有现代桌面和移动浏览器都支持CSSflexbox！您可以在此处查看flexbox跨浏览器支持和flexbugs详细信息。

.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: -webkit-flex !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;
-webkit-flex-grow: 1 !important;
text-align: center !important;
font-size: 0.8rem !important;
display: block !important;
flex-direction: column !important;
-webkit-flex-direction: column !important;
justify-content: center !important;
-webkit-justify-content: center !important;
font-weight: 600;
height: 60px !important;
}
.mobile-bottom-nav__item--active {
color: #FF0030;
}
.mobile-bottom-nav__item-content {
display: -webkit-flex !important;
display: flex !important;
-webkit-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>