0

I have a slide out menu on my site. On Chrome, Edge, and Firefox mobile, it looks like this:

enter image description here

On Safari, the top of the menu is cut off by the URL bar. As you can see, the "Home" and "X" are cut off. Why does this happen in Safari and how can I prevent it?

enter image description here

Here is the HTML and CSS of the menu

'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;
}
Stack Attack
  • 55
  • 7
  • 1
    Yes RCB that fixed it! The solution from that answer is "You can try min-height: -webkit-fill-available; in your css instead of 100vh. It should be solved". If you post an answer with it I will give you the credit! Thanks again – Stack Attack May 20 '21 at 04:00
  • It doesn't allow me to post it as an answer. Glad it worked out for you! – RCB May 20 '21 at 04:10
  • Just a tip, you actually don't have to put such a high z-index, it's enough with a range from 1-10 often :) – Dejan.S May 20 '21 at 05:09

0 Answers0