javascript - HTML/CSS - Safari 移动 URL 切断网页。Z指数问题？在 Chrome、Edge 或 Firefox 中不会发生

Question

我的网站上有一个滑出式菜单。在 Chrome、Edge 和 Firefox 移动版上，它看起来像这样：

在 Safari 上，菜单顶部被 URL 栏截断。如您所见，“Home”和“X”被切断了。为什么在 Safari 中会发生这种情况，我该如何预防？

这是菜单的 HTML 和 CSS

'meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"'

<div id="slideOutMenu">
    <span>X</span>
    <span>Home</span>
    <span>Preferences</span>
    <span>About</span>
    <span>Legal</span>
    <span>Contact</span>
</div>

#slideOutMenu {
    right: 0 !important;
    transform: translate3d(0px, 0px, 0px) !important;
    transition: transform .381s ease-in-out 0s !important;
    width: 221px;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: auto;
    z-index: 200;
    background: #3f3f3f;
    box-shadow: -1px 0 1px rgba(0,0,0,0.29034);
    z-index: 1111;
    overflow-y: auto;
    min-height: 100vh;
}

标签： javascripthtmlcssgoogle-chromesafari